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 相关文章推荐
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
js实现汉字排序的方法
Jul 23 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
小程序实现图片移动缩放效果
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令牌 Token改进版
2008/07/18 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
php变量范围介绍
2012/10/15 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
YII实现分页的方法
2014/07/09 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 模拟购物车的实例讲解
2017/09/11 Python
Python算法之图的遍历
2017/11/16 Python
django-filter和普通查询的例子
2019/08/12 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
学生处主任岗位职责
2013/12/01 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
八项规定整改方案
2014/10/01 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
初三化学教学反思
2016/02/22 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android