Vue.js上传图片到阿里云OSS存储的方法示例

如何在VueJS使用阿里云存储上传图片?

什么是OSS呢? 其实按照官网的解释就是->>阿里云对象存储服务(Object Storage Service)

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

(1)首先,打开官网-----https://www.aliyun.com/

打开官网,我们鼠标挪到产品这一列,展开后,我们点击对象存储OSS

(2)点击去之后,鼠标滑到最后,点击产品文档

(3)进去之后,我们看到有一大栏内容,不要怕,先做第一波操作,自己慢慢看完官网的一些API或者方法,不要求全部会,但最起码有个了解

(4)看得是不是头皮发麻,哈哈,本人也是,我们可以直接看接入OSS部分

(5)进去发现之后好像也没看到官方提示的demo或者Code,为了不麻烦各位的时间,我们直接点击这个

我们来看看官方提供的实例代码,有些人可能一眼就看出来是什么意思了,但是我想解释一下通过Client调用PUT方法,里面的两个参数代表是什么意思呢?

第一个参数:object-name* 就是你要上传到OSS管理控制台的路径

我们来结合input标签看看:

因为我这边对图片的类型没有限制这个要求,所以我选择了所有类型的图片格式accept="image/*",接下来我们继续看:
比如我们在对这个input标签添加默认改变事件之后,也是@change="handlefile($event)", 然后我们在methods里面定义一个handlefile (event) {}这个方法

首先,我们可以打印一下,看看event打印的东西

我们可以直接看这个target,展开后,我们去找我们需要的东西,或者我们可以直接这样打印,event.target.files[0],我们来看看结果

我们需要的就是type这个属性:type="image/jpeg", 因为到时你上传到公司的OSS管理控制台,可能是要按照他们提供的地址去拼接,所以我们拿到这个type属性进行截串,拿到格式的后缀.jpeg

当然截串的方式有很多种,哪种方便哪种来吧

拿到后缀之后,接下来我们要做的就是:去拼接上传路径

其中date是时间戳,用来加以区分唯一性,并且你也可以在拼的时候加上自己的标识

第二个参数:local-file 就是input标签的file属性 (event.target.files[0]*)
当了解完这两个参数后,至于前面的

region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'

公司分工比较明确,有人已经在申请好了,拿过来以字符串的形式写死就可以了。

看完之后,相信你也可以用官方提供的能做出来

那么在VueJS中怎么去做呢,第一种做法就是你可以直接npm install ali-oss --save, 然后创建一个JS文件,然后导入进去

接着,就是你需要用到的地方去调用client的PUT 方法,然后去执行,第二种方法就是我并没有用官方提供的try catch去做,我是这样做的

我首先在index.html引入

接着,我在需要用的地方通过client 去调用PUT方法:

那么在成功的回调中,就可以拿到图片的URL,那么就可以了~简单的图片的上传就OK了,但是另外延伸一点东西,就是,因为做的是IM聊天的东西,当我上传同一文件多次的时候,会出现无效的情况,后来我去了解了一下,就是说:我们先回到这张图

解释: @click="headImage"用于触发Input被点击,用于选择文件。

**@change="handfile($event)"**方法在选择的文件改变后触发,其中$event包含已选择文件的所有文件信息。

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

造成无效的结果说明,你每次提交的路径都是一致的,加上@change="handfile($event)"这个事件也就只有文件路径event.target.value发生改变的时候才会触发

那么解决办法就是在你每次上传文件完了之后,在后面写上**event.target.value='';**重置一下文件路径,那么重复上传的时候,@change="handfile($event)"才会进行重复触发

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

时间: 2018-12-12

vue上传图片组件编写代码

本文实例教大家如何编写一个vue上传图片组件,具体如下 1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片: <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 2.触发隐藏的文件标签:(通过原生的click来触发) document.ge

vue axios 表单提交上传图片的实例

项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的  multipart/form-data    接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag

vue.js 上传图片实例代码

最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来. 前端部分 <div class="form-group"> <label>背景图</label> <input type="file" class="form-control" @change="onFileChange"> </div> <d

vue中el-upload上传图片到七牛的示例代码

一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload

基于VUE选择上传图片并页面显示(图片可删除)

基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="

vue实现的上传图片到数据库并显示到页面功能示例

本文实例讲述了vue实现的上传图片到数据库并显示到页面功能.分享给大家供大家参考,具体如下: 1.点击上传图片,弹出选择图片选项框. 页面代码: <div class="form-signin-heading" id="btnUpload" @change="upload">上传图片</div> <input type="file" name="avatar" id="

vue上传图片到oss的方法示例(图片带有删除功能)

最近Vue项目中,要将用户上传的图片全部上传到oss上, OSS配置项请访问:https://help.aliyun.com/document_detail/64095.html?spm=a2c4g.11186623.6.773.kcD20n OSS平台配置 在平台的概览里面看看自己的基础设置里面的读写权限是否改为了公共读,我这边只有配置公共读才上传并且回显图片成功,其他情况还请朋友告知,谢谢 关于跨域访问的配置 这里是我的效果图 (当只有点击上传按钮时才会上传到OSS) 预览图片 <templ

VUE axios上传图片到七牛的实例代码

浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交. form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据.但是如果想传输多条form表单数据,需要写很多dom,同时还要写iframe,太麻烦. 目前感觉比较干净的办法就是通过axios的post请求,发送form数据到后台. html部分,至于界

使用vue构建一个上传图片表单

这篇博客也不知道起个什么名字比较好,毕竟刚开始学习vue,很多还不是很熟悉,一直在慢慢摸索中:之前也习惯了用jQuery写js代码,思维逻辑也要有个转换的过程. 1. 转变思维 使用vue编写代码,首先要做的就是转换思维,vue是一个数据驱动的框架,我们只需要操作数据,数据变化后,vue会自动改变DOM结构,而jQuery是直接操作DOM的.比如刚开始写的代码中犯的错误,有一个页面中的input标签是并列多个的,而且name属性的值是自增的,那么我就用v-for循环下,把index填充进去就行了

vue.js图片转Base64上传图片并预览的实现方法

对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入img标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现. 针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直

解决Extjs上传图片无法预览的解决方法

复制代码 代码如下: { width: 450, fileUpload: true, fieldLabel: '选择图片', items: [{ xtype: 'textfield', id: 'up_forth', name: 'up_forth', inputType: 'file', width: 300 }] } 预览box 复制代码 代码如下: { columnWidth: .18, bodyStyle: ' margin:4px 10px 10px 5px', layout: 'fo

vue.js 图片上传并预览及图片更换功能的实现代码

这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

JS上传图片前实现图片预览效果的方法

本文实例讲述了JS上传图片前实现图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

Vue.js图片预览插件使用详解

Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程. 如果你已经是有经验的前端开发者,想知道 Vue

vue+node实现图片上传及预览的示例方法

本文介绍了vue+node实现图片上传及预览的示例方法,分享给大家,具体如下: 先上效果图 上代码 html部分主要是借助了weui的样式 <template> <div> <myheader :title="'发布动态'"> <i class="iconfont icon-fanhui1 left" slot="left" @click="goback"></i>

JS实现上传图片实时预览功能

前段时间在网络上找的代码,修改了一部分用在了项目里.原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除. //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_' + fileObj.na

JS验证图片格式和大小并预览的简单实例

实例如下: function photoCheck(obj){ var ff = $("#photoSrc").val(); if(ff == null || ff == ""){ return; } photo_flag = true; var fSize = 50.9 * 1024; var fileType; var fileSize; var filePath; if (obj.files) { // webkit, mozilla... (jq:$.sup

js实现上传图片及时预览

本文实例为大家分享了javascript图片预览功能实现的具体代码,供大家参考,具体内容如下 先为大家分享一段关于js图片预览的代码,兼容火狐和谷歌浏览器 /* 案例展示图片预览 */ $(function(){ $("#file0").bind("change",function(){ clickupLoad(); }); }); function clickupLoad(){ var imgObject = document.getElementById('fi

js上传图片及预览功能实例分析

本文实例讲述了js上传图片及预览功能.分享给大家供大家参考.具体分析如下: 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt="" /> <input type="file" /> function DisplayImage(fileTag,imgTagId){ var allowExtention=".