如何在VueJS中使用阿里巴巴云存储上传图片？

什么是OSS？其实根据官网的解释，就是——阿里巴巴云对象存储服务

在实际开发中，公司可能会随时使用OSS来存储一些数据，比如文本、图片、音视频等各种非结构化数据文件。恰好在做项目的时候用到OSS存储。对于我来说，我从来没有用过，所以我们先看看文档，看看是怎么回事~看看前端是如何在VueJS的环境下上传OSS的。

(1)首先，打开官方网站——https://www.aliyun.com/

打开官网，将鼠标移动到产品栏，展开，点击对象存储OSS。

(2)点击后，鼠标滑动到最后，点击产品文档

(3)进入后，我们看到了一大列内容。不要怕，先做第一波操作，慢慢看官网的一些API或者方法。你不需要所有的会议，但至少你有一个理解

(4)看头皮是否麻木，哈哈，我也是，我们可以直接看接入OSS部分。

(5)进去发现后，好像没看到官方演示或者Code。为了不麻烦大家的时间，我们直接点击这个

让我们看一下官方示例代码。有些人可能一眼就看出是什么意思，但我想解释一下通过Client调用PUT方法是什么意思。其中的两个参数是什么？

第一个参数：对象名*是您想要上传到OSS管理控制台的路径

让我们看看输入标签:

因为我这边对图片的类型没有限制，所以我选择了所有类型的图片格式accept='image/* '，然后我们继续看：比如在这个输入标签中添加了默认的change事件之后，也是@change='handlefile($event)'，然后我们在methods中定义一个handlefile (event) {}方法。

首先，我们可以打印出来，看看打印的是什么事件

我们可以直接看这个目标，展开后就能找到我们需要的，或者直接打印出来，event.target.files[0]，让我们看看结果

我们需要的是type: type='image/jpeg '的属性，因为当你上传到公司的OSS管理控制台时，可能要根据他们提供的地址进行拼接，所以我们得到这个type属性进行截取，得到后缀。格式的jpeg。

当然剪弦的方法有很多，很方便。

获取后缀后，我们接下来要做的就是拼接上传路径

其中，日期是一个时间戳，用来区分唯一性，拼写时也可以添加自己的logo

第二个参数：local-file是输入标记(event.target.files[0]*)的文件属性。理解了这两个参数后，对于前一个参数，

区域：“您的区域”、访问密钥：“您的访问密钥”、访问密钥Ecret :“您的访问密钥Ecret”、存储桶：“您的存储桶名称”有明确的分工。已经有人申请了。就拿着它，以字符串的形式写下来。

看完了，相信你也可以和官方的一起做

那么如何在VueJS中实现呢，第一种方式是可以直接npm安装ali-oss - save，然后创建一个JS文件并导入

然后，在需要使用的地方调用客户端的PUT方法，然后执行。第二个方法是我没有用官方的试捕来做，所以我做了

我第一次介绍它是在index.html

然后，我在需要的地方通过客户端调用PUT方法：

然后，在成功的回调中，可以得到图片的URL，然后就可以了~简单的图片上传就可以了，但是另外一个扩展就是因为我在做IM聊天，当我多次上传同一个文件的时候，就会失效。后来我去了解了一下，就是先回到这张图。

说明：@click='headImage '用于触发输入被点击和选择文件。

* * @ change=' handlile($event)' * *方法在所选文件更改后触发，其中$ event包含所选文件的所有文件信息。

* *文件路径* *:* * * * event . target . value * * *；

无效的结果显示您提交的路径每次都是一致的，并且事件@ change=' handlile($ event ')只会在文件路径event.target.value更改时触发。

那么解决的办法就是每次上传文件后写* * event.target.value=' ' after* *重置文件路径。重复上传时，@ change=' handlile($ event ')会重复触发。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。