java vue 图片使用七牛简单上传前台的写法

<template>
<el-form :model="temp" label-position="left" label-width="70px" style='width: 400px; margin:50px;'>
<el-form-item label="姓名"><el-input v-model="temp.name"></el-input></el-form-item>
<el-form-item label="是否展示"><el-input v-model="temp.active"></el-input></el-form-item>
<el-form-item label="主治内容"><el-input v-model="temp.description"></el-input></el-form-item>
<el-form-item label="部门"><el-input v-model="temp.department"></el-input></el-form-item>
<el-form-item label="职位"><el-input v-model="temp.title"></el-input></el-form-item>
<el-form-item label="城市"><el-input v-model="temp.city"></el-input></el-form-item>
<el-form-item label="医院"><el-input v-model="temp.hosptial"></el-input></el-form-item>
<el-form-item label="头像">
<el-input v-model="temp.headimgurl" @change="headimgurlChange"></el-input>
<el-col :span="10" class="mt10">
<el-upload class="upload-demo" :file-list="fileList1" :action="domain" :before-upload="beforeAvatarUpload" :data="form"
:on-success="handleAvatarSuccess" list-type="picture" :limit="1" multiple>
<el-button size="small" type="primary" @click="upPicName='headimgurl'">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-col>
</el-form-item>
<el-form-item>
<el-button @click="cancel">取 消</el-button>
<el-button @click="save">保 存</el-button>
</el-form-item>
</el-form>
</template>

<script>
import { getToken } from '@/api/qiniu'
import { createExpert, updateExpert } from '@/api/expert'
import waves from '@/directive/waves' // 水波纹指令

export default {
name: 'currentExpert-form',
props: ['list', 'currentExpert', 'currentComponent', 'operation'],
directives: {
waves
},
data() {
return {
upPicName: '', // 上传图片名字
fileList1: [],
form: { token: '' }, // 上传到七牛的token
bucketQuery: {
bucket: 'website-image' // 这是我用来获取token传给后台的字段
},
domain: 'http://upload.qiniu.com', // 七牛云的上传地址
qiniuaddr: 'img.peihu.mobi' // 这是七牛云空间的外链默认域名
}
},
computed: {
temp: function() {
if (this.operation === 'create') {
return {
id: null,
name: null,
active: null,
description: null,
headimgurl: null,
city: null,
department: null,
title: null
}
} else {
return Object.assign({}, this.currentExpert)
}
}
},

methods: {
// 上传图片规格
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
return this.$message.error('上传文件只能是 JPG或PNG 格式!')
}
if (!isLt2M) {
return this.$message.error('上传图片大小不能超过 2MB!')
}

return getToken(this.bucketQuery).then(res => {
this.form = {
token: res.data
}
})
},
// 图片改变及上传
bannerPicChange(value) {
this.fileList1 = []
this.fileList1.push({
name: value,
url: value
})
},
handleBannerPicRemove(file, fileList) {
this.fileList1 = []
this.temp.headimgurl = ''
},
headimgurlChange(response) {
this.temp.headimgurl = 'http://' + this.qiniuaddr + '/' + response.key
},
handleAvatarSuccess(response) {
if (this.upPicName === 'headimgurl') {
this.fileList1 = []
this.fileList1.push({
name: 'http://' + this.qiniuaddr + '/' + response.key,
url: 'http://' + this.qiniuaddr + '/' + response.key
})
this.temp.headimgurl = 'http://' + this.qiniuaddr + '/' + response.key
}
this.$message({
type: 'success',
message: '上传成功!',
duration: 2000
})
},

cancel() {
this.$emit('update:currentComponent', 'expert-list')
},

save() {
if (this.operation === 'create') {
createExpert(this.temp).then(response => {
this.temp.id = response.data.id
this.list.unshift(this.temp)
this.$emit('update:currentExpert', this.temp)
this.$emit('update:operation', 'list')
this.$emit('update:currentComponent', 'expert-list')
this.$emit('update:list', this.list)
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
})
})
} else if (this.operation === 'update') {
updateExpert(this.temp.id, this.temp).then(respones => {
for (const v of this.list) {
if (v.id === this.temp.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.temp)
break
}
}
this.$emit('update:currentExpert', this.temp)
this.$emit('update:currentComponent', 'expert-list')
this.$emit('update:list', this.list)
this.$notify({
title: '成功',
message: '更新成功',
type: 'success',
duration: 2000
})
})
}
}
}
}
</script>

转载于:https://www.cnblogs.com/reprint/p/9779153.html