使用ElementUi中的Upload遇到的坑点

2020/12/21 07:56
阅读数 568

使用ElementUi中的Upload 上传遇到的坑点
1、我使用的Ui样式是这个样式,为手动上传形式
在这里插入图片描述
2、话不多说,上代码


<el-upload
           v-model="ruleUserForm.logoUrl"
            class="upload-demo"
            ref="upload"
            action="aaa"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :http-request="uploadFile"
            :auto-upload="false"
            :limit="1"
            list-type="picture"
            style="width:300px"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >保存</el-button
            >
          </el-upload>

3、遇到问题–跨域问题
点击保存按钮出现下面报错:
在这里插入图片描述
解决办法:使用vue.config.js代理


module.exports = {
   
   
  devServer: {
   
   
    port: port,
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    proxy: {
   
   
      '/file': {
   
   
        target: "http://192.168.0.250:6002",
        pathRewrite: {
   
   
          '^/file': ''
        },
        changeOrigin: true
      }
    },
   },
  },

重点来了,当我配置完后,再去点击保存,发现跨域问题并没有解决,惊了个大呆,调试了半天,最终发现,是因为我VSCode设置了自动保存,配置完后,忘记重启vue项目!!!此处强调三遍,修改完config.js后一定要重启项目!修改完config.js后一点要重启项目!修改完config.js后一点要重启项目!

4、图片上传接口写法
还是跟之前一样,只是加上你刚刚配置的名字而已

// 图片上传接口
export const userUploadFile = (parms) => {
   
   
    return http.post('/file/cron/files/uploadFile',parms)
}

5、关于action的坑点

因为我是手动上传,所以action随便写什么都可以(我不是很推荐在action直接写请求地址,之前遇到的跨问题域,就是直接在action里写请求地址导致的- - -仅代表个人观点)

6、Base64的设置,见代码

getBase64(file) {
   
   
      return new Promise(function (resolve, reject) {
   
   
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
   
   
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
   
   
          reject(error);
        };
        reader.onloadend = function () {
   
   
          resolve(imgResult);
        };
      });
    },

7、http-request的使用
根据ElementUi的官方文档解释为:覆盖默认的上传行为,可以自定义上传的实现 ElementUi
官网

所以,直接在http-request对应的函数里面写入我们的图片上传函数

async uploadFile(params) {
   
   
      const _file = params.file;
      let photoBase64 = await this.getBase64(_file);
      //此处可以定义上传文件大小等
      // const isLt2M = _file.size / 1024 / 1024 < 2;
      // // 通过 FormData 对象上传文件
      // var formData = new FormData();
      // formData.append("file", _file);

      // if (!isLt2M) {
   
   
      //   this.$message.error("请上传2M以下的.xlsx文件");
      //   return false;
      // }
      var arr = [];
      arr.push(photoBase64);
      var pas = {
   
   
        type: 1,
        base64: arr,
      };
      userUploadFile(pas).then((res) => {
   
   
        if (res.data.code == 1000) {
   
   
          this.ruleUserForm.logoUrl=res.data.data[0];
          this.$message({
   
   
            message: '图片上传成功',
            type: "success",
          });
        } else {
   
   
          this.$message({
   
   
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },

此处使用asyncawait的原因
由于在设置图片Base64的时候,使用了一个promise方法,它为异步函数,如果不等待他返回,就拿到的是一个promise对象,这不是我们要的具体的值

8、按钮设置的函数去触发该方法

submitUpload() {
   
   
      this.$refs.upload.submit();
      //触发uploadFile函数
    },

9、文件上传钩子和移除钩子,我没有特殊用法,直接复制官网例子,这里就不做赘述,代码如下

    handleRemove(file, fileList) {
   
   
      console.log(file, fileList);
    },
    handlePreview(file) {
   
   
      console.log(file);
    },
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部