vue实现图片上传功能


Posted in Javascript onMay 28, 2020

本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下

先看效果

vue实现图片上传功能

图片上传使用vant组件库中的 van-uploader, 使用方法参考官网
vant组件库

下面看代码

UploadPicture.vue

<template>
 <div class="content">
 <!-- 底部模块start -->
 <div class="bottom_bg">
 <p class="flexst pt8">上传图片</p>
 <div class="upload_bg">
 <div
 v-for="(item, index) in this.remUploadImgUrls">
 <img class="showimg" :src="item"/>
 <img
 class="delicon"
 src="@/assets/images/consult_close.png"
 @click="(e) => delImgClick(index, e)"
 />
 </div>
 <!--
 v-if="remUploadImgUrls.length < 6"
 限制最多6张
 -->
 <img
 class="addimg" src="@/assets/images/inq_addImg.png"
 v-if="remUploadImgUrls.length < 6"
 @click="openMenu"
 />
 </div>
 </div>
 <!-- 底部模块end-->
 <van-actionsheet
 v-model="menuShow"
 :actions="actions"
 cancel-text="取消"
 @select="onSelect"
 />
 <van-uploader id="upload" :after-read="onRead"/>
 </div>
</template>

<script>
 import {mapState} from 'vuex'
 export default {
 name: "UploadPicture",
 data() {
 return {
 menuShow: false,
 actions: [
 {
 name: '历史照片'
 },
 {
 name: '选择相册或拍照'
 }
 ],
 }
 },
 computed: {
 ...mapState({
 remUploadImgUrls() {
 return this.$store.state.uploadImgUrls;
 }
 })
 },
 methods: {
 openMenu() {
 this.menuShow = true
 },
 onSelect(item) {
 this.menuShow = false
 console.log(item);
 if (item.name === '选择相册或拍照') {
 return document.getElementById('upload').click();
 }
 },
 onRead(file) {
 this.$store
 .dispatch({
 type: 'uploadImg',
 payload: file.file
 })
 .then(() => {
 // Toast.clear;
 });
 },
 delImgClick(index, e) {
 let tmpList = [...this.remUploadImgUrls];
 tmpList.splice(index, 1);
 this.$store.commit('DEL_UPLOADIMG', tmpList);
 }
 },
 }

</script>

<style scoped lang="scss">
 .content {
 .bottom_bg {
 margin: 10px 8px 0;
 padding: 0 .1rem;
 background: #fff;
 .upload_bg {
 margin-top: 10px;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 div {
 width: 31%;
 margin-bottom: 10px;
 position: relative;
 .showimg {
 width: 100%;
 height: 100%;
 }
 .delicon {
 position: absolute;
 right: -6px;
 top: -6px;
 width: 20px;
 height: 20px;
 }
 }
 .addimg {
 width: 31%;
 height: 31%;
 margin-bottom: 10px;
 }
 &:after {
 width: 30%;
 content: '';
 }
 }
 }
 }

</style>

src/store/index.js

import Vue from 'vue';
import vuex from 'vuex';
import { get, post} from '@/api';

Vue.use(vuex);
export default new vuex.Store({
 module: {
 },
 state: {
 uploadImgUrls: [],
 },
 mutations: { // 处理同步方法
 SET_UPLOADIMG(state, imgUrl) {
 const tmp = state.uploadImgUrls;
 tmp.push(imgUrl);
 state.uploadImgUrls = tmp;
 },
 DEL_UPLOADIMG(state, data) {
 state.uploadImgUrls = [...data];
 },
 },
 actions: { // 处理异步方法
 // 上传图片
 async uploadImg({ commit }, { payload }) {
 let f = new FormData();
 f.append('file', payload);
 const data = await post('/upload', f);
 commit('SET_UPLOADIMG', data);
 },
 },
});

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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

Javascript 相关文章推荐
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
js清理Word格式示例代码
Feb 13 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
小程序实现图片移动缩放效果
May 26 #Javascript
jQuery实现的分页插件完整示例
May 26 #jQuery
js实现时间日期校验
May 26 #Javascript
Node.js API详解之 assert模块用法实例分析
May 26 #Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 #Javascript
js校验开始时间和结束时间
May 26 #Javascript
vue实现简单跑马灯效果
May 25 #Javascript
You might like
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
tab栏切换原理
2017/03/22 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python语言描述随机梯度下降法
2018/01/04 Python
在python中安装basemap的教程
2018/09/20 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
python 通过exifread读取照片信息
2020/12/24 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
公司接待方案
2014/03/08 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
档案接收函格式
2015/01/30 职场文书
物业接待员岗位职责
2015/04/15 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
家长意见书
2015/06/04 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
如何利用React实现图片识别App
2022/02/18 Javascript
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS