vue el-upload 上传文件 action 跨域

最新推荐文章于 2025-05-20 10:48:31 发布

原创最新推荐文章于 2025-05-20 10:48:31 发布 · 1.5w 阅读

57 ·

CC 4.0 BY-SA版权

文章标签：

#vue el-upload 上传文件 action 跨域

vue 专栏收录该内容

43 篇文章

订阅专栏

本文介绍如何在Vue项目中使用el-upload组件避免跨域问题，通过自定义http-request属性实现图片上传，并包含文件类型及大小校验，确保上传过程符合业务需求。

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

问题：直接在action中写后端地址会出现跨域问题

解决：用http-request指定具体上传方法

el-upload代码如下，action中随便写，反正用不到

<el-upload
            class="avatar-uploader"
            action="string"
            :show-file-list="false"
            :http-request="uploadImage"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.picUrl" :src="form.picUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

// 上传图片方法
    uploadImage(param){
      const formData = new FormData()
      formData.append('file', param.file)
      uploadAvatar(formData).then(response => {
        console.log('上传图片成功')
        this.form.picUrl = process.env.VUE_APP_BASE_API + response.imgUrl
      }).catch(response => {
        console.log('图片上传失败')
      })
    },

上述代码中uploadAvatar方法如下

// 文件上传
request({
    url: '/system/file/upload',
    method: 'post',
    data: data
  })

照片上传前校验代码如下

// 资质照片上传前校验
    beforeAvatarUpload(file) {
      const isPic = file.type.indexOf('image') >= 0;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPic) {
        this.$message.error('资质照片只能为图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isPic && isLt2M;
    },

附加：上传方法为传递自定义参数

:http-request="(param) => uploadImage(param,4)"

其中4为自定义参数