JS 图片上传

一、获取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;//封装FormDatalet 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 图片上传的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。