首页 > Web开发 > 详细

Ant Design of Vue ——Upload组件 —— 自定义上传行为

时间:2019-12-27 15:27:48      阅读:1432      评论:0      收藏:0      [点我收藏+]
//通过覆盖默认的上传行为,可以自定义自己的上传实现
customRequest(file) {
  let _self = this
  var formData = new FormData();
 
  //注意formData里append添加的键的大小写
  formData.append(‘key‘, _self.aliyunOssToken.key); //存储在oss的文件路径
  formData.append(‘OSSAccessKeyId‘, _self.aliyunOssToken.ossaccessKeyId); //accessKeyId
  formData.append(‘policy‘, _self.aliyunOssToken.policy); //policy
  formData.append(‘Signature‘, _self.aliyunOssToken.signature); //签名
formData.append("file", file);
formData.append(‘success_action_status‘, 201); //成功后返回的操作码
 
file.onProgress()

axios(
  {
  url: _self.action,
  method: ‘post‘,
  data: formData,
  // headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘}
}).then(data => {
console.log(data)
let f = data.indexOf(‘<Location>‘), l = data.indexOf(‘</Location>‘)
let str = data.substring(f+10,l)
console.log(‘remoteImgUrl--> ‘ + str)
file.onSuccess() //上传成功
}).catch( err =>{
  file.onError() //上传失败
})
}
 
// 上传文件改变时的状态
change(info) {
const status = info.file.status;
if (status !== ‘uploading‘) {
console.log(info.file, info.fileList);
}
if (status === ‘done‘) {
this.$message.success(‘上传成功!‘)
} else if (status === ‘error‘) {
this.$message.error(`${info.file.name} 文件上传失败.`);
}
}

Ant Design of Vue ——Upload组件 —— 自定义上传行为

原文:https://www.cnblogs.com/duoer/p/12107021.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!