526互联

element-plus 上传组件 el-upload 自定义上传 文件至 OSS

发布时间 2023-04-27 17:15:55作者: oduokei

看了源码 beforeData 在 beforeUploadPromise 之前 导致 异步设置 :data 不生效 文件传不上去

到 2.3.4 版本 这个问题还没修复 所以用 http-request 实现 用 axios 上传文件

非常简单

 

const ossData = reactive({
  action:"",
  sendData:{
    OSSAccessKeyId:"",
    policy:"",
    Signature:"",
    key:"",
      callback:""
  }
})
:action="ossData.action"
:data="ossData.sendData"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="handleUpload"

beforeAvatarUpload  获取 OSSAccessKeyId policy Signature key callback action 这里省略...

handleUpload 会传入一个对象如下：

action: ""
data: {OSSAccessKeyId: '', policy: '', Signature: '', key: '', callback: ''}
file: File {uid: 1682585843600,  …}
filename: "file"
headers: {}
method: "post"
onError: (err) => {…}
onProgress: (evt) => { onProgress(evt, rawFile); }
onSuccess: (res) => {…}
withCredentials: false

该有的都有 

const handleUpload = (object) => {
    let formdata = new FormData();
    formdata.append('OSSAccessKeyId',ossData.sendData.OSSAccessKeyId);
    formdata.append('policy',ossData.sendData.policy);
    formdata.append('Signature',ossData.sendData.Signature);
    formdata.append('key',ossData.sendData.key);
    formdata.append('callback',ossData.sendData.callback);
    formdata.append('file',object.file); //file 一定要在 key 之后 不然会报错?
    uploadFileToOSS(formdata,ossData.action).then(res=>{
        if(res.code==200){
            object.onSuccess(res);
        }else{
            ElMessage({ message: '上传失败', type: 'error', showClose: true });
        }
    })
  }
export function uploadFileToOSS(data,action){
  return service({
    url: action,
    method: 'POST',
    data:data,
    headers: {
      'Content-Type':'multipart/form-data'
    }
  })
}