el-upload文件图片上传；el-upload上传跨域问题

原创已于 2023-03-03 09:44:03 修改 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-03-02 16:48:40 首次发布

element 专栏收录该内容

20 篇文章

订阅专栏

文章介绍了在前端使用axios进行文件上传时如何配置Content-Type以及处理跨域问题。通过el-upload组件，结合自定义http-request方法，将文件转换为FormData并调用封装好的upload方法。同时展示了upload方法的实现，利用axios向后端发送POST请求进行文件上传。

1.axios配置

if(config.isFormData){
 config.headers["Content-Type"] = "multipart/form-data"; 
}

2.el-upload

   <el-upload action="abcd"   :http-request="uploadFile">
    </el-upload>
      //自定义上传方法  用action有跨域的问题
      uploadFile(params) {
          const file = params.file;
          // 使用FormData传参数和文件
          var form = new FormData();
          // 文件
          form.append("file", file);
          // 调用封装好的上传方法，传给后台FormData
          upload(form).then(data => {
                console.log('上传图片成功')
          }).catch(response => {
                console.log('图片上传失败')
          })

    }

3.请求方法

export const upload = (formData) => { 
    return request({
          url: '/api/blade-resource/oss/endpoint/put-file',
          method: 'post',
          isFormData:true, 
          data:formData }
    )}