oss是直接通过阿里云的上传方式,说说我之前的做法吧
- 第一步,封装接口
export const GET_OSS_SIGN = () => $get('/oss/signature')
- 请求获取oss签名内容
getLOSSSign () {
const vm = this
vm.$loading.show()
GET_LIZHENG_OSS()
.then(r => {
if (r.statusCode === 200) {
vm.uplodeImgALY(r.data)
} else {
vm.$toast(r.data.message)
}
vm.$loading.close()
})
.catch(e => {
vm.$loading.close()
console.error(e)
})
},
- 拿到签名内容作出相应处理
uplodeImgALY (ossForm) {
const vm = this
let { policy, accessid, signature, host, dir } = ossForm
let timestamp = Date.parse(new Date())
let userId = vm.$cookie.get('account').id
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
let filePath = res.tempFilePaths[0]
let fileName = filePath.lastIndexOf('.')
let fileNameLength = filePath.length
let fileFormat = filePath.substring(fileName + 1, fileNameLength)
let setImg = `${dir}${timestamp}_${userId}.${fileFormat}`
wx.uploadFile({
url: `${host}`,
filePath,
header: {
'Content-Type': 'multipart/form-data'
},
name: 'file',
formData: {
key: setImg,
policy,
OSSAccessKeyId: accessid,
success_action_status: '200',
signature
},
success: function (res) {
if (res.statusCode === 200) {
vm.imgList.push(`${host}/${setImg}`)
} else {
vm.$toast('上传失败')
}
},
fail: function (err) {
console.info(err)
}
})
},
fail: function (err) {
console.info(err)
}
})
}
总结
- 思路就是获取签名
- 从签名中获取到上传请求需要的参数
- 每次上传自动生成存放到服务器的唯一文件名
- 上传成功后就能够将签名中的请求地址和自身设置的文件名称拼接进行访问
好吧,大概就是这样,闲暇之余做出点分享也算是个记录吧