JS 图片上传

原创已于 2022-02-08 13:54:43 修改 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-02-08 13:53:44 首次发布

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了在Vue.js中实现图片上传的步骤，包括获取File对象、创建formData、使用axios发送数据，提供了完整的代码示例，并展示了请求预览功能。

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

一、获取File对象

// 获取File对象
	let firstImg = data.add_design.first_pic_whether.raw;

1、用户上传的图片数据

在这里插入图片描述
.1.1、图片数据详情

二、使用new formData()

	let binary = new FormData()
	binary.append('file',firstImg)
    binary.append('name','2')

三、发送数据

   PostData.call(this, '/newproduct/ImgUrlApi/postDemandData/', binary, res => {
      console.log(res);
   },'file')

axios封装代码

// post请求
async function PostData(url, formData, callback,file) {
    const uv = qs.stringify(formData);
    if (file) {
        const {data: res} = await $http.post(url, formData, {
            headers: {
            // 设置头
                'Content-Type': 'multipart/form-data;'
            }
        });
    } else {
        const {data: res} = await $http.post(url, uv );
    }
    if (res.code !== 200) {
        ElMessage.error(res.msg);
    } else {
        ElMessage.success(res.msg);
    }
    callback(res)
}

四、完整代码示例

function sendImg(arg) {
	//得到图片对象
      let firstImg = data.add_design.first_pic_whether.raw;
      
    //封装FormData
      let binary = new FormData()
      binary.append('file',firstImg)
      binary.append('name','2')
      
    //axios发送
      PostData.call(this, '/newproduct/ImgUrlApi/postDemandData/', binary, res => {
         	console.log(res);
         },'file')
      }
      
    // 注意：axios请求头设置
    headers: {
       'Content-Type': 'multipart/form-data;'
    }