Vue实现图片上传功能：

1、前端API：

export const commonUpload=obj=>{return request({url:`/api/common/upload`,method:'post',data:obj})
}

2、前端页面：

<template><el-form>....<el-form-item label="照片"><el-upload ref="upload" :file-list="fileList" :class="{hide:photoHide}":on-change="handleChange" :on-remove="photoRemove" list-type="picture-card"action="#" :auto-upload="false"><i class="el-icon-plus"></i></el-upload></el-form-item>....</el-form>
</template><script>import {commonUpLoad} from '@/api/common'export default{data(){return{photoHide:false,picUrl:'',fileList:[],}},methods:{init(item){//初始化，获取数据if(item.pic){this.fileList.push({url:item.pic.picUrl})this.pohotHide=true}},cancleBtn(){//取消按钮this.$refs.upload.clearFiles()this.picUrl=''this.fileList=[]this.pohotHide=false},submitBtn(){//提交按钮let param={...this.detailForm}param.pic={picUrl:this.picUrl}Object.keys(param).map(item=>{if(Object.prototype.toString.call(param[item])==='[object Array]'){param[item]=param[item].join(',')}})getSave(param).then(res=>{//保存接口//this.$parent.getData()  //调用父级方法，更新数据if(res.data.code==0){this.$message.success('保存成功')//this.cancelBtn()   //重置}})},handleChange(file,fileList){//图片上传let formData=new FormData()formData.append('file',file.raw)commonUpLoad(formData).then(res=>{this.picUrl=res.data.urlthis.detailForm.picId=res.data.pic_id})this.photoHide=fileList.length>=1;},photoRemove(file,fileList){//图片移除this.photoHide=fileList.length>=1;this.picUrl=''}}}
</script>

Vue实现图片上传功能：相关推荐

vue实现图片上传功能
vue实现图片上传功能一.vue的核心插件 1. vuex 2. vue-router 二.服务器代理配置三.路由配置四.自定义axios 五.请求服务器逻辑六.vuex-store 七.登录 ...
Vue 图片上传功能
Vue 图片上传功能 Vue 图片上传功能,自定义上传限制上传类型 & 多选: ① accept 属性只能与配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性 ...
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
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" ...
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重 ...

Vue实现图片上传功能：

1、前端API：

2、前端页面：

Vue实现图片上传功能：相关推荐

最新文章

热门文章