一、獲取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 图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。