前端上传文件多种多样,但是都大同小异,重要的也就是与后台服务打通这一步。
下面图片演示重要的两点:

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

在这里插入图片描述

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

在这里插入图片描述

好,下面附上代码供参考

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)
        })
    })
}
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()
            })
        },
Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐