Element-Ui之Upload组件,利用axios+阿里oss上传

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_23398171/article/details/89493930

利用阿里oss做文件服务器,配合element-ui的upload组件实现。

通过重写upload组件的http-request属性实现。具体实现逻辑如下:

  1. 配置axios
  2. 重写http-request请求
    具体实现
fnOSSUpload(options) {
   const that = this;
   that.$http
     .get(options.action)
     .then(res => {
       if (res.code === 1) {
         let uploadData = new FormData();
         uploadData.append("OSSAccessKeyId", res.data.accessid);
         uploadData.append("policy", res.data.policy);
         uploadData.append("Signature", res.data.signature);
         uploadData.append("key", res.data.dir + "${filename}");
         uploadData.append("success_action_status", 200);
         uploadData.append("callback", res.data.callback);
         uploadData.append("name", options.file.name);
         uploadData.append("file", options.file);
         let config = {
           headers: { "Content-Type": "multipart/form-data" },
           onUploadProgress: options.onProgress
         };
         that.$http
           .post(
             res.data.host,
             uploadData,
             config
           )
           .then(res => {
             if (res.code === 1) {
               options.onSuccess(res);
             } else {
               options.onError(res.message);
             }
           })
           .catch(error => {
             options.onError("图片上传失败");
           });
       }
     });
 }
展开阅读全文

没有更多推荐了,返回首页