當(dāng)前狀況:PC端有分片上傳的接口,小程序里沒有FormData 對(duì)象荡灾。
解決思路:自定義了一個(gè)FormData 對(duì)象(代碼以及用法:http://www.reibang.com/p/ece23dfd771a),傳參有所區(qū)別萌京,邏輯依然可以安卓web端的來。
在全局定義一個(gè)axios
Vue.prototype.$httpRequest2 = axios.create({
withCredentials: true,
crossDomain: true,
baseURL: '',
timeout: 6000
})
上傳組件UploadFile.vue
引入
import FormData from '@/lib/wx-formdata/formData.js'
// 上傳文件
uploadFile({
currentAssetId,
rootAssetId,
fileUploadUrl,
chunk,
chunkSize,
chunkTotal,
fileExt,
index,
rid,
md5
}) {
const that = this
// 進(jìn)行上傳
const start = (chunk - 1) * chunkSize
let end = start + chunkSize
let size = ''
const item = this.uploadFileList.find(it => it.rid === rid)
size = item.data.size
item.state = 'progress'
// 上傳完成
if (start >= size) {
// 更改本地?cái)?shù)據(jù)
this.uploadFilesChange({
currentAssetId: currentAssetId, // 文件id
chunk: chunkTotal, // 當(dāng)前片
chunkTotal: chunkTotal,
state: 'success', // 狀態(tài)
rid: rid, // 假數(shù)據(jù)id
md5State: 2 // 是否是假數(shù)據(jù) 1:假數(shù)據(jù) 2:真數(shù)據(jù)
})
return
}
// 最后一片
if (end > size) {
end = size
}
// 組裝上傳參數(shù)
let fileData = {}
fileData = item.data.fData
fileData = fileData.slice(start, end)
// 獲取每一片的md5
this.spark.append(fileData)
const hexHash = this.spark.end(false)
const chunkMd5 = hexHash
const formData = new FormData()
// formData.append('currentAssetId', currentAssetId)
formData.appendFile('file', fileData, item.data.path)
const _data = formData.getData()
// 調(diào)用分片上傳接口
that
.$httpRequest2({
url:
fileUploadUrl +
`Form?currentAssetId=${currentAssetId}&rootAssetId=${currentAssetId}&chunk=${chunk}&chunkSize=${chunkSize}&chunkTotal=${chunkTotal}&fileExt=${fileExt}&hash=${md5}&chunkHash=${chunkMd5}`,
method: 'POST',
timeout: 10000,
headers: {
'Content-Type': _data.contentType
// 注意,這里不能直接使用 'Content-Type': 'multipart/form-data'他托,因?yàn)樾〕绦蛑袥]有 FormData對(duì)象,所以需要自定義一個(gè)FormData對(duì)象
},
data: _data.buffer
})
.then(res => {
console.log('分片成功請(qǐng)求:', res, '第幾片:', chunk)
// 存上傳進(jìn)度
that.uploadFilesChange({
currentAssetId: currentAssetId, // 文件id
chunk: chunk + 1, // 當(dāng)前片
chunkTotal: chunkTotal,
state: 'success', // 狀態(tài)
rid: rid, // 假數(shù)據(jù)id
md5State: 2 // 是否是假數(shù)據(jù)
})
that.uploadFile({
currentAssetId: currentAssetId,
rootAssetId: rootAssetId,
fileUploadUrl: fileUploadUrl,
chunk: chunk + 1,
chunkSize: chunkSize,
chunkTotal: chunkTotal,
fileExt: fileExt,
index: index,
rid: rid,
md5: md5
})
})
.catch(err => {
console.log('成功請(qǐng)求后仆葡,上傳失敗赏参,重新上傳:', err)
// 上傳失敗
that.uploadFilesChange({
currentAssetId: currentAssetId, // 文件id
chunk: chunk, // 當(dāng)前片
chunkTotal: chunkTotal,
state: 'fail', // 狀態(tài)
rid: rid, // 假數(shù)據(jù)id
md5State: 2 // 是否是假數(shù)據(jù) 1:假數(shù)據(jù) 2:真數(shù)據(jù)
})
that.uploadFile({
currentAssetId: currentAssetId,
rootAssetId: rootAssetId,
fileUploadUrl: fileUploadUrl,
chunk: chunk,
chunkSize: chunkSize,
chunkTotal: chunkTotal,
fileExt: fileExt,
index: index,
rid: rid,
md5: md5
})
wx.showToast({
title: res.msg,
icon: 'none'
})
})
}
注意,這里不能直接使用 'Content-Type': 'multipart/form-data'沿盅,因?yàn)樾〕绦蛑袥]有 FormData對(duì)象把篓,所以需要自定義一個(gè)FormData對(duì)象。上面所使用的是自己封裝的FormData對(duì)象腰涧。
用法:
這是結(jié)構(gòu):
components
|——UploadFile.vue
libs
|—— wx-formdata
|——formData.js
|——mimeType.js