2024-07-07
温故知新
00
请注意,本文编写于 94 天前,最后修改于 94 天前,其中某些信息可能已经过时。

目录

简介
选择图片
代码解析:
上传图片
代码详解
总结
赞助请求V3

简介

本文记录使用Uniapp开发小程序时,如何实现一个文件(图片)上传的功能,并且将图片上传至阿里云OSS。

基于Vue3

选择图片

ts
const selectImage = () => { uni.chooseImage({ count: 1, sizeType: ["compressed"], success: (file) => { console.log(file); getSignature("avatar").then((sign) => { // console.log(sign); const newName = getNewFilename(file.tempFilePaths[0]); // console.log(newName); uploadImage(sign, newName, file.tempFilePaths[0]).then((res) => { // console.log(res); imageStr.value = `${sign.host}/${sign.dir}/${newName}`; info.value.avatarUrl = `${sign.host}/${sign.dir}/${newName}`; }); }); }, }); };

代码解析:

  1. selectImage可以作为点击事件触发的调用方法;
  2. 使用 uni.chooseImage 触发选择本地图片的功能(打开资源管理器);
  3. countsizeType 选择图片的限制参数,只能选择一张图片,是否允许拍照,更多配置参数请自行查阅uniapp官网:【chooseimage】,请基于自身实际情况修改
  4. success 为选择图片后的回调函数;
  5. 因为这里是前端上传图片到阿里云OSS,所以需要获取阿里云OSS的临时授权密钥等信息,否则后续无法正常调用阿里云的存储服务,所以这里先执行 getSignature ,调用自己的后端接口获取授权信息,请基于自身实际情况修改
  6. getSignature 成功后,这里对选择后的文件名进行重新生成,所以使用了 getNewFilename请基于自身实际情况修改
  7. 因为这里限制每次只能选择一张图片,所以 file.tempFilePaths[0] 直接选择的第一张图片的名字,file.tempFilePaths[0] 获取到的是uniapp自动生成的临时文件名,一般格式是http://xxxx.jpg请基于自身实际情况修改
  8. uploadImage 是二次封装的上传图片接口,请看下方【上传图片】详细代码
  9. 上传成功后,直接使用 ${sign.host}/${sign.dir}/${newName} 拼装成功后的图片url链接,请基于自身实际情况修改

上传图片

ts
export const uploadImage = ( param: OssSign, fileName: string, tempFilePath: string ): Promise<OssResponse> => { return new Promise((resolve, reject) => { uni.uploadFile({ url: param.host || "", //仅为示例,非真实的接口地址 filePath: tempFilePath, name: "file", formData: { // callback: param.callback, OSSAccessKeyId: param.accessid, policy: param.policy, Signature: param.signature, success_action_status: '200', key: `${param.dir}/${fileName}`, // 自定义文件名 }, success: (res) => { console.log(JSON.stringify(res)); const { statusCode, data } = res; if (statusCode === 200) { // 确保 data 是期望的类型 const r = data as OssResponse; resolve(r); } }, fail: (err) => { reject(err) } }); }); };

代码详解

  1. param 是前面从 getSignature 获取到的阿里云授权参数,具体参数有哪些 请看最后的表格,更多信息可前往阿里云官方文档查阅:如何进行服务端签名直传OSS。(不得不说的是,阿里云有些文档写的是真的看不懂,乱得很)。
  2. fileName 是依据业务规则生成的新的文件名。
  3. tempFilePath 是前面提到的uniapp生成的文件临时路径,这个不能改变!
  4. 使用 uni.uploadFile 开始真正的上传文件
  5. 其中 url 是阿里云oss的地址;
  6. filePath 是uniapp的文件临时路径;
  7. name 是文件数据的属性名字,阿里云是固定的file
  8. formData 是其他的字段,这里都是阿里云文档中标示的必选/可选字段,具体字段含义请参考阿里云文档【PostObject】。
  9. success 是上传成功后的回调函数。

下面是 getSignature 接口返回的一些参数,不保证完全一致,具体情况请根据自身业务调整

字段名含义备注
expire由服务器端指定的Policy过期时间一般可以忽略
policy用户表单上传的策略(Policy)上传必填参数
signature对Policy签名后的字符串上传必填参数
accessid临时访问密钥AccessKey ID上传必填参数
hostBucket域名如果没有自定义域名,则一般是阿里云oss服务的域名,上传图片时调用的地址就是该值,同时也是图片URL的域名
callback回调如果上传图片成功后需要阿里云回调自身服务器接口,可在上传图片是传入该参数
dir限制上传的文件前缀大概是需要拼接到文件名上的,即上面代码 formData 中的 key

总结

使用Uniapp实现图片上传还是比较简单的,而且在电脑端模拟器中也可以进行相关调试,其他类型文件上传也可以参考本文内容,逻辑大致相同,总结要点步骤如下:

  1. 使用 uni.chooseImage 来实现选择图片的功能,当然也可以使用其他方法,如 uni.chooseMedia 等;
  2. 使用 uni.uploadFile 快速实现上传图片接口的调用;
  3. 遵从上传图片接口的要求,进行相关参数的组装,如使用阿里云oss,就需要查阅阿里云的文档。本文使用的是:后端签名 前端上传 模式,即 服务端签名直传 模式,其他模式请自行查阅阿里云文档;
  4. 如果添加了 callback 参数,则回调接口要保证正确,如果阿里云回调发生错误,可能会判定为图片上传失败,但其实图片上传成功了,只是回调失败,务必注意!

赞助请求V3

建站因为热爱,生活需要Money,请屏幕前的大佬动动您发财的小手,点击一次以示鼓励,祝您生活愉快!

PS:就目前的访问量,即便每个访客都点一次广告,收入也不足以支付运营成本。如果看不到广告,可能是网络原因或被拦截了,那就算了吧。再次祝您生活愉快~~

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!