使用ElementUi中的Upload遇到的坑点

最新推荐文章于 2024-05-13 23:33:15 发布

风里有诗句

最新推荐文章于 2024-05-13 23:33:15 发布

阅读量6k

点赞数 3

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_43378800/article/details/111404354

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文分享使用ElementUi中Upload上传遇到的问题及解决办法。包括跨域问题，需用vue.config.js代理且修改后要重启项目；还提及图片上传接口写法、Base64设置、相关组件使用，以及按钮触发方法等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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",
          });
        }
      });
    },

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

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

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

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

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },