JS 图片上传

一、获取File对象

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

1、 用户上传的图片数据

JS 图片上传
.1.1、 图片数据详情
JS 图片上传

二、使用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;'
    }

五、请求预览

JS 图片上传

上一篇:Jmeter—5 关联 响应数据传递-正则表达式提取器


下一篇:关于promise的实现