当前位置: 首页 > Web前端 > HTML5

Vue.js上传图片到阿里云OSS存储

时间:2023-04-05 00:07:54 HTML5

VueJS中如何使用阿里云存储上传图片?什么是开源软件?其实根据官网的解释,>>阿里云对象存储服务(ObjectStorageService)在实际开发中,公司可能会使用OSS随时存储一些数据,比如文本、图片、音频和video等一种非结构化数据文件,刚好在做项目的时候用到OSS存储。对于我这个新手,没用过,先看看文档看看是怎么回事吧~看看前端如何在VueJS环境下上传OSS(一)首先打开官方网址-----https://www.aliyun.com/打开官网,鼠标移动到产品栏,展开,点击对象点击存储OSS后(2),滑动鼠标到最后,点击产品文档(3)进入,我们看到一大栏内容,不要怕,先做第一波操作,慢慢看官网的一些API或者方法,不是全部是必须的,但至少有个了解(4)是不是头皮发麻?提示demo或code,为了不打扰大家,直接点这个看官方的示例代码,可能有人一眼就看出是什么意思,但是我想说明一下如何通过Client调用PUT方法,What里面的两个参数是什么意思?第一个参数:object-name*是你要上传到OSS管理控制台的路径。我们看一下input标签:因为我对图片的类型没有限制,所以我选择所有类型的图片格式accept="image/*",我们继续看:比如我们添加defaultchange之后event到这个input标签,也是@change="handlefile($event)",然后我们在methods中定义一个handlefile(event){}这个方法先,我们打印一下看看event打印的是什么,我们可以直接看target,展开后就可以找到我们需要的了,也可以直接这样打印,event.target.files[0],我们来看看结果。我们需要的是type属性:type="image/jpeg",因为你上传到公司OSS管理控制台的时候,可能会根据他们提供的地址进行拼接,所以我们得到的type属性是截断以获得网格后缀.jpeg当然有很多种切字符串的方法,哪一种方便呢?得到后缀后,接下来要做的就是:拼接上传路径,其中date是时间戳,用来区分唯一性,拼的时候也可以加上自己的logo。第二个参数:local-file是输入标签的文件属性(event.target.files[0]*)。了解这两个参数后,至于前面region:'',accessKeyId:'',accessKeySecret:'',bucket:'Yourbucketname'公司分工是比较清楚,已经有人申请了,这里拿字符串的形式写死就可以了。看完相信你也能用官方的做出来。那么在VueJS中如何实现,第一种方式可以直接npminstallali-oss--save,然后创建一个JS文件,然后导入进去。然后,需要调用客户端的PUT方法,然后执行它。第二种方法我没有用官方的trycatch来做。我是这样做的。我是先在index.html里面引入的然后,我用客户端在需要的地方调用了PUT方法:然后在成功的回调中,就可以拿到图片的url了,就ok了~简单上传图片就OK了,但是还有一点要扩展,就是因为我是在做IM聊天,当我多次上传同一个文件的时候,就会失效。然后我去找了下,就是:我们回到这里图片的解释:@click="headImage"用于触发Input被点击,用于选择文件。**@change="handfile($event)"**方法在选中的文件发生改变后触发,其中$event包含了选中文件的所有文件信息。**文件路径**:**event.target.value**;无效结果说明你每次提交的路径都是一样的,加上@change="handfile($event)"的事件也会只会在文件路径event.target.value发生变化时触发。解决方法是写**event.target.value='';**每次上传文件后重新设置文件路径,那么重复上传时,就会重复触发@change="handfile($event)"。萌新刚开车,哪里还不够,希望大家多多指点,如果觉得还不错的话请点个赞吧~~~~~~