前端vue项目上传图片到后台服务

劫大大2025-07-24 17:18

前端上传文件多种多样，但是都大同小异，重要的也就是与后台服务打通这一步。

下面图片演示重要的两点：

第一点，要将请求的Content-Type设置为"multipart/form-data"

第二点，要将接口文件入参放入new FormData()中

好，下面附上代码供参考

javascript 复制代码

export const uploadImage = (url, params = {}) => {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: url,
            data: params,
            headers: {
                "Content-Type": "multipart/form-data"
            }
        }).then(response => {
            resolve(response.data)
        }).catch((error) => {
            reject(error)
        })
    })
}

javascript 复制代码

        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file, this.fileList);
            const formData = new FormData();
            formData.append('avatar', file.file)
            const toast = this.$toast.loading({
                duration: 0,
                overlay: true,
                forbidClick: true,
                message: '上传中...',
            });
            this.$uploadImage(`接口地址`, formData).then(res => {
                if (res.code !== 200) {
                    toast.clear()
                    this.$toast(res.msg)
                    return
                }
                toast.clear()
            })
        },

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> E N D \\END </math>END