Vue项目实现手机端上传图片，使用于PC/Android/Ios_vue上传图片资源-CSDN下载

2星需积分: 50 7 浏览量 2019-01-08 17:42:00 上传评论 3 收藏 57KB DOC 举报

资源推荐

资源详情

资源评论

Vue 项目中使用 H5 进行图片上传

一、技术栈

(1) 前端 Vue2.0 、webPack、Axios

(2) 后端 Spring Boot Mybatis

二、使用的场景

Vue 作为前端框架，通过开发的 web 应用部署到服务器上。能够实现 PC

端浏览器访问，手机端浏览器访问。并能在 PC 和手机端通过浏览器来调用(本

地文件夹、手机相册)来选择需要上传的图片。并在页面对选择的文件进行预览

展示。

三、前端代码实现

核心代码

(一)调用相册进行图片选择的标签

<div class="ex-c selectImageDiv">

<input class="imageInputStyle" type="le"

accept="image/*"

v-on:change="imageInput($event.target.les)"></input>

</div>

说明：

(1)通过使用 H5 提供的标签<input>并设置 type=”+le”和

accept=”image/*”

(2)v-on:change=”imageInput($event.target.+les)”方法来实现

对上传文件资源的读取

(二) 标签中绑定的 imageInput 方法实现

imageInput: function (+les) {

let that = this;

//

获取到

input

框中选择的文件

let imgFile = +les[0];

//

创建

h5

中提供的文件流每次进此方法必须进行

new

这样才能保证每次进

来是个当前选择的图片

var readImage = new FileReader();

//

将图片转成

url

或者

base64

位字符串

readImage.readAsDataURL(imgFile);

//

由于

FileReader

是个异步操作因此不能直接将转换的图片字符串赋值给变

量必须调用

onload

方法此方法是在

readAsDataURL

转换完成后调用，可

解决异步问题

readImage.onload = function () {

//

将预览图片

push

到数组中

that.imageItem = readImage.result;

}

},

(三) 将选择好的图片进行预览展示

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

随便谢谢

2020-09-23

只有一个文档吗要这么多币
谦语

2019-04-27

东西还行在完整点就好了

搬砖小僧
上传者
2019-04-28

好的空闲了弄个demo到github上
decadezuo

2019-03-28

只有思路，没有详细代码，基本没啥用。

搬砖小僧
上传者
2019-03-28

文档中核心代码复制粘贴就能用详细的项目运用代码自己放到项目里即可

搬砖小僧

粉丝: 4

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip