Uview的Upload组件
前言
有很长一段时间没有更新了，由于工作的繁忙导致没有时间写博客，今天在做到公司特殊场景需要用到上传组件并直传阿里云Oss，这里简单讲讲我在完成前端项目中使用到Uview的Upload遇到的问题以及我是如何解决，直传阿里云Oss的。
版本
uview-ui: "^2.0.31"
node：14.18.1
官方地址
https://www.uviewui.com/components/upload.html
简单的使用方法
这里如果你单纯的想拿到上传之后的url的话，可以直接看官方实例：
使用
<script>
export default {
data() {
return {
fileList1: [],
}
},
methods:{
// 删除图片
deletePic(event) {
this[`fileList${
event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${
event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
});
})
},
}
}
</script>
注意点
这里的:fileList=fileList1要与data中的fileList1一一对应，不能乱写，具体原因可以继续看下去。
他其实本质是对uniapp的upload的再次封装！
结果
我们使用这个组件上传后，我们可以打印出返回的event
这里是结果，
如果是单图上传，我们可以发现，我们的图片存储在了一个对象里，里面的file中有我们图片的名称，大小，以及临时存储路径，如果你传给后端只需要传链接，那么看这里就可以结束了，剩下的就是格式的问题，看后端需要什么样的图片格式，对blob流进行相应的转化即可，
如果是多图上传，那么file会有多个对象，也是同样的道理。
直传阿里云oss
这里属于是特殊的场景需求了，有需要的小伙伴可以看下去。
如果改造Uview的Upload来进行前端直传阿里云Oss
我们仔细观察官方实例，其实可以发现，上传的核心代码是在这里：
const result = await this.uploadFilePromise(lists[i].url)
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
});
})
},
通过循环遍历图片数组，将图片调用uploadFilePromise方法进行上传，我们拿到图片的临时url，使用uni.uploadFile方法进行上传图片，所以他其实本质是对uni的上传方法进行二次封装，那么清楚原理之后，我们进行改造，要直传阿里云Oss，首先我们得获得阿里云Oss的权限，这里一般情况都是通过后端拿到临时阿里云Oss访问权限，也就是我们所说的密钥。
阿里云Oss官方地址
https://help.aliyun.com/document_detail/111265.html?spm=a2c4g.11186623.0.0.6f6d110aTbK5Vs
我们需要的就是这些
最重要的其实就是这两个，访问阿里云Oss，当然还有其他很多的参数，这个看具体的业务场景需求，可能还需要其他的参数，但是密钥是必须的，所以要想上传阿里云Oss，就得先获得权限，下面会解释遇到的坑。
accessid：密钥ID
signature：密钥
policy
方法
我们改造官方示例：
let a = uni.uploadFile({
url: your.host, // 仅为示例，非真实的接口地址,这里的地址是传阿里云oss的地址
filePath: url, //url就是你拿到的图片url，这里不用动
fileType: type, //类型 ,这里是必填的，直接拿event里面的type即可
name: 'file', //不用动
formData: {
key: this.key, //这里是指你存放到阿里云oss的路径
region: 'oss-cn-shenzhen', //这里是阿里云需要的地域
policy: this.oss.policy, //签名
signature: this.oss.signature, //密钥
OSSAccessKeyId: this.oss.accessid, //id
},
success: (res) => {
// setTimeout(() => {
// resolve(res.data.data)
// }, 1000)
resolve(res.data.data)
//成功的回调
}
遇到的问题
权限问题
我们发现，虽然返回的是uploadFile：ok，但是Oss中并没有，我们仔细看，其实还是失败的，是errMsg，这种一般是权限问题，可以跟后端沟通配合解决，报错中也会提示究竟是哪个权限有问题。
跨域问题
跨域的问题在浏览器中经常会有，这个网上的配置有很多，你可以参考一下，当然，最简单无脑的方式，你可以直接使用HbuilderX的内置浏览器，当然体验不是特别好，但是没有跨域的问题！
页面中使用多个Upload，出现的问题
我在使用官方示例没有问题，但当我使用多个Upload进行上传就出现了问题，找不到fileList
后来我发现了，官方实例中的这一句
let fileListLen = this[`fileList${
event.name}`].length
这是Es6的模板字符串，跟我一样看不懂的，属实得多看看基础了
this[`fileList${
event.name}`]
他其实是这个this.fileList+event.name
所以，注意：我们的upload中的name和:fileList="xxx"，不能自己去乱定义，你使用官方的示例，那就得遵守规则，这个name的值，其实就是event.name的值，如果你的name为“1”，那么:fileList="fileList1"就必须得这么写
同理可得：
<u-upload
:fileList="fileList1"
@afterRead="afterRead"
@delete="deletePic"
name="1"
multiple
:maxCount="10"
></u-upload>
<u-upload
:fileList="fileList2"
@afterRead="afterRead"
@delete="deletePic"
name="2"
multiple
:maxCount="10"
></u-upload>
<u-upload
:fileList="fileList3"
@afterRead="afterRead"
@delete="deletePic"
name="3"
multiple
:maxCount="10"
></u-upload>
data() {
return {
fileList1: [],
fileList2: [],
fileList3: [],
}
你就得这么写，所以一开始使用为什么觉得这么命名那么奇怪，想自定义命名的同学们，那就得体验一下报错的快感了。
后言
我是前端小白，如果你觉得这篇文章有哪些不足之后，或者还遇到什么奇怪的问题，可以在评论区留言