纯前端实现图片上传功能

纯前端实现图片上传功能，告别后端formData上传

使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能
了解了upload的基本属性之后我们要开始上硬菜了

使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能

首先简单了解一下ElmentUi的upload组件封装的自有属性：

action ：必须填参数，主要用来存放上传地址；如果你认为自定义上传要使用到action这个属性那么你就大错特错了
headers ：设置上传请求的头部，对应的参数必须是一个参数
multiple：设置是否运行上传多个文件/图片；
码字太难，不说上图
这些属性在我们开发过程中可能都会使用到所以大家还是要认真了解

了解了upload的基本属性之后我们要开始上硬菜了

云服务器对应的配置信息

uploadData: {SecretId: '', //密钥idSecretKey: '',//密钥的keybucket: '1',//服务器名称信息region: ''//服务器位置信息
},//

实现自定义上传主要使用的是upload的http-request属性，我们可以设置自定的上传服务器地址，覆盖action的默认地址

<el-uploadactionref="upload"list-type="picture-card":http-request="handleUpload":file-list="fileList":on-remove="handleRemove":on-success="handleAvatarSuccess":show-file-list="true":multiple="false":limit="1"accept="image/jpeg, image/jpg, image/png"style="position: relative;"><i class="el-icon-plus"></i>
</el-upload>

编写自定义上传函数handleUpload()，可能会有很多小伙伴疑惑COS是个什么东东，别急下面我会做出详细的解释，可能不是特别准确，希望大家指正
http-request回调中获取的对象

 handleUpload(param) {let file = param.file;//http-request会获取到自定义上传的文件对象这个对象if (!file) return;let cos = new this.COS({SecretId: this.uploadData.SecretId, //密钥idSecretKey: this.uploadData.SecretKey //密钥的key});let bucket = this.uploadData.bucket;let region = this.uploadData.region;let upload_dir = "activeCenter/stuFaceImage/";let fileName ="stuFaceImage" +file.uid +"." +file.name.split(".")[file.name.split(".").length - 1];cos.putObject({Bucket: bucket,Region: region,Key: upload_dir + fileName,Body: file},(err, data) => {if (err) {self.$message.error({message: err.error});} else {this.img ="https://" +bucket +".cos." +region +".myqcloud.com/" +upload_dir +fileName;console.log(this.img);}});},

接下来我们只需要将this.img发送给后端就ok这样就实现了一个简单的将本地图片上传到腾讯云服务器的功能

纯前端实现图片上传功能相关推荐

ckeditor java 上传_java使用CKEditor实现图片上传功能
java如何使用ckeditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的ckeditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预 ...
关于微信内置浏览器，打开图片上传功能，调用的问题
关于微信内置浏览器,打开图片上传功能,调用的问题前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述: 显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢? ...
（转）淘淘商城系列——实现图片上传功能
http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项 ...
Smiditor实现图片上传功能
Simditor 是 Tower 开源的一个基于浏览器所见即所得的文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验兼容的主 ...
PHP实现图片上传功能
PHP实现图片上传功能: 第一个页: picupload.php 代码如下: <form action="picop.php" method="post" ...
ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
Vue 图片上传功能
Vue 图片上传功能 Vue 图片上传功能,自定义上传限制上传类型 & 多选: ① accept 属性只能与配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性 ...
织梦dedecms广告管理增加广告图片上传功能
织梦的广告位管理是一个不错的插件内部插件,但是dedecms的广告管理功能稍微有点次,不能直接上传图片生成图片链接本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自 ...
纯前端网站的上传（3free免费空间）教程
纯前端网站的上传(3free免费空间)教程一.8u-ftp 首先下载一个8UFTP,安装好之后先不用管. 二.3free 1.打开3free的官网,点击注册. 2.姓名那可以随便填 3.之后点击激活 ...

纯前端实现图片上传功能

纯前端实现图片上传功能，告别后端formData上传

使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能

了解了upload的基本属性之后我们要开始上硬菜了

纯前端实现图片上传功能相关推荐

最新文章

热门文章