uni-app 前端实现阿里云图片上传

最新推荐文章于 2024-07-16 11:57:44 发布

今天2岁

最新推荐文章于 2024-07-16 11:57:44 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/jiangyue2694/article/details/108085628

版权

前端实现阿里云图片上传

vue+element pc端实现
纯前端不经过后端实现上传到阿里云图片上传的方法在网上很多了，我这里记录一下最近我们所写的一个需求，前端拿到后端签名在图片上传，这样会比纯前端做图片上传安全些。

我自己的这个时联合了elementui做的图片上传

<el-upload
   list-type="picture-card"
    action
    :http-request="upLoad"
    :on-remove="handleRemove"
    :on-change="changeUpload"
    :auto-upload="false"
>
   	<i class="el-icon-plus"></i>
</el-upload>

这个不能让他自动上传，我们需要使用http-request重新写上传，action这个不能缺少，但是我写这个的时候有个疑问，用这个放上去文件之后，before-upload 这个钩子就使用不到了，是因为只是放上去了，但是没有上传吗？如果有人知道的话，麻烦留言一下

我们这边做的是，在图片上传前从我们后端那边拿到签名保存起来，然后在按照我下面的写法给放上去

upLoad(item) {
   
    const file = item.raw   // 图片文件
    const fileName = item.raw.name // 图片文件名称
    const key = `${
     this.directory}/${
     item.pic_name}` // 这个其实就是你最后要上传到阿里云的目录下的路劲  item.pic_name 这个是我们后端返回给我的重命名的图片名称
    const policy = item.policy // 后端签名返