Vant Uploader和axios结合上传图片/文件到后台

Qiu_SS

已于 2022-05-07 10:41:45 修改

阅读量1.6k

点赞数 2

于 2022-05-07 10:28:30 首次发布

本文链接：https://blog.csdn.net/Qiu_SS/article/details/124625182

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

上传图片到后台，解决跨域
HTML代码
<van-uploader v-model="viewFileList"
              accept="all"
              upload-icon="add-o"
              prediv-size="60"
              @click.native="getFileItem()"
              @delete="deleteFile"
              :after-read="afterReadUpload">
    <van-button icon="description" size="small" type="info">上传文件</van-button>
</van-uploader>

js代码

afterReadUpload(e, detail) {
    var name = e.file.name
    var t = this
    let content = e.file
//新建一个FormData对象
    let data = new FormData()
//往其中添加要传到后台的参数（地址或名字等）
    data.append('file', content, name)
//设置请求头
    let config = {
        header: {
            'Content-Type': 'multipart/form-data',
//后台要求验证的身份信息
            'Cookie':  this.sessionId,
//解决跨域
            'Access-Control-Allow-Credentials': true
        }
    }
//解决跨域
    axios.defaults.withCredentials = true
//后台要求验证的身份信息，中括号内的参数名称可填后端需要的字段名称
    axios.defaults.headers.common['X-Token'] = this.token
//url为接口地址，本地项目url可能还需要做代理处理
    axios.post("/api/upload/", data, config).then((res) => {
        
    }).catch(() => {

    })
},

如果需要做代理

vue.config.js

module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 10001,
         //以上的ip和端口是我们本机的
        proxy: {
            '/api/': {
                target: "http://test.cn",  // 接口地址,仅为示例，非真实的接口地址
                changeOrigin: true,  // 允许跨域
                pathRewrite: {
                    '^/api/': '/api/'
                }
            },

}