vue上传图片，并回显图片

未用组件库，原生的input输入框提交
这个看需求吧，用组件库的话，可以减少挺多代码的，但是这个的后端，因为只能单独提交照片，所以我就使用js了。逻辑绕绕的。

<input v-show="false" type="file" accept="image/*" @change="tirggerFile($event)" ref="input" /><div style="" @click="openImg" class="changeimgurl"><span v-if="changeimg==''">点击上传文章附图</span><img style="height:100%;width:100%;" v-if="changeimg!=''" :src="changeimg" /></div><van-button  ref="button" plain hairline type="info"  size="normal" class="changeimg" @click.prevent="submitupdataimg">+提交图片</van-button>

export default {data () {return {changeimg: ''}},methods: {// 预览上传头像图片tirggerFile: function (event) {const file = event.target.files[0]console.log(file)console.log(file.size)if (file.size > (5 * 1024 * 1024)) {Toast.fail('图片大小不能超过 5M')return 'error'}this.file = filelet url = ''var reader = new FileReader()reader.readAsDataURL(file)const that = thisconsole.log(reader)reader.onload = function (e) {url = this.result.substring(this.result.indexOf(',') + 1) // 图像预显base64路径that.changeimg = 'data:image/png;base64,' + url}},openImg () {this.$refs.input.click()},// 将数据提交给服务器submitupdataimg () {console.log('提交图片')// this.$refs.button.setAttribute('disabled', 'disabled')console.log(this.file)var testfile = this.file// alert提示框，确定是否需要上传。async function beforeClose (action, done) {if (action === 'confirm') {setTimeout(done, 500)console.log(testfile)console.log(testfile.name)if (testfile.name === undefined) {Toast.fail('请重新选择需要上传的图片')return 'error'}// 提交上传图片的路径const forms = new FormData()forms.append('file', testfile) // 获取上传图片信息const result = await uploadimage(forms)console.log(result)if (result.status === 200) {console.log('上传图片成功')// 增加禁用button按钮的禁止点击事件，防止多次点击，多次提交数据this.$refs.button.setAttribute('disabled', 'disabled')} else {alert('上传图片失败')}} else {// alert('取消上传图片')setTimeout(done, 500)}}Dialog.confirm({title: '上传图片',message: '确定要上传图片吗?',beforeClose})},}
}

vue上传图片，并回显图片相关推荐

Simditor 上传图片回显图片src base64 换成图片链接
Simditor 是一款简介好用的富文本插件使用过程中发现添加图片后,后台报错说字段太长,无法存入内容原因是:Simditor 没有找到上传图片后回显的图片地址,直接获取图片的源文件转成base ...
【java】批量上传图片并回显功能
一.前言在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...
java上传图片回显_【java】批量上传图片并回显功能
一.前言在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...
HTML上传图片的回显
document.getElementById("showImg").src = window.URL.createObjectURL(personsFile.files[0]); ...
java spring 上传图片,springboot 上传图片并回显
之前也有做过上传图片的功能,不过是用在ssm的项目中,也有很多的不完美. 这次用的springboot,基本上对上传图片又有了一定的认识,想再这里记录一下./** * 上传图片 * * @return ...
springboot 上传图片并回显
之前也有做过上传图片的功能,不过是用在ssm的项目中,也有很多的不完美. 这次用的springboot,基本上对上传图片又有了一定的认识,想再这里记录一下. /*** 上传图片** @return*/ ...
使用Dropzone上传图片及回显示例
一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"><div class="col-md-12" ...
vue页面回显数据_解决vue表单回显数据无法修改的问题
前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改项目环境:springboot+vue前后端分离问题:修改操作数据回显无法输入值一.问题截图二. ...
el-upload编辑时回显图片
在使用el-upload上传时,传给后端得是一个file文件流,而编辑回显的时候后端返回的是一个图片地址,这个时候就需要将url赋值到fileList里面 <el-form-item label ...

vue上传图片，并回显图片

vue上传图片，并回显图片

vue上传图片，并回显图片相关推荐

最新文章

热门文章