vue移动端上传文件插件_vue移动端图片上传

没有用插件就简单的图片上传

页面布局如下

type="file"

accept="image/*"

style="display:none"

@change="changeImg()"

name="upload_file"

ref="input"

/>

+

添加名片或相关图片

css样式

.input-up {

padding: 0.26rem 0.18rem;

}

.input-up .upload {

width: 2.36rem;

height: 1.4rem;

border: 1px solid #f5f5f5;

}

.input-up .upload span {

display: block;

text-align: center;

font-size: 0.6rem;

color: #d8d8d8;

}

.input-up .uploads {

width: 1.4rem;

height: 1.4rem;

border: 1px solid #f5f5f5;

}

.input-up .uploads img {

display: block;

width: 100%;

height: 1.4rem;

}

.input-up .upload p {

text-align: center;

font-size: 0.2rem;

color: #d8d8d8;

}

接口请求用的是axios

import { Toast } from 'mint-ui' // mint-ui的弹窗提示

export default {

data () {

return {

customer_id:"",

otherimg:"",

imgData: [] // 选择图片保存数组

}

},

methods: {

//图片change事件

changeImg () {

// 上传图片事件

var files = this.$refs.input.files

var that = this

function readAndPreview (file) {

if (file !== undefined) {

if (/\.(jpe?g|png|gif)$/i.test(file.name)) {

var reader = new FileReader()

reader.onload = function (e) {

// 避免重复上传同个图片

if (that.imgData.indexOf(e.target.result) === -1) {

that.imgData.push(e.target.result)

that.otherimg = that.imgData.pop() //每次展示最后一个上传的图片

} else {

Toast('已有该图片')

}

}

reader.readAsDataURL(file)

}

}

}

readAndPreview(files[0])

if (files.length === 0) {

return false

}

console.log(that.imgData)

that.uploadFile(files[0]) // 文件上传服务器

},

// 图片上传接口

uploadFile (file) {

this.formData = new FormData()

// 添加文件流

this.formData.append('files', file, file.name)

//添加接口的参数 看需求传或不传

this.formData.append('user_token', localStorage.getItem('user_token'))

this.formData.append('customer_id', this.customer_id)

this.axios.post('/customerinfo/uploadImg',

headers: {

'Content-Type': 'multipart/form-data'

},

this.formData

).then(res => {

if (res.code === 0) {

//返回图片的地址res.data

this.otherimg = res.data

Toast('上传成功')

}

})

},

upload () {

// 点击触发按钮

this.$refs.input.dispatchEvent(new MouseEvent('click'))

}

}

}