vue删除图片同时删除本地文件_基于VUE选择上传图片并页面显示（图片可删除）...

╰半夏微凉° 2023-01-08 08:08 158阅读 0赞

这篇文章主要为大家详细介绍了基于VUE选择上传图片并页面显示(图片可删除)，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

基于VUE选择上传图片并在页面显示，图片可删除，具体内容如下

demo例子：

【图片暂缺】

依赖文件：jqueryform

HTML文本内容：

代码如下：

相关照片

上传照片

提交

JS文本内容：

代码如下：

/\*\*

\* 从 file 域获取 本地图片 url

\*/

function getFileUrl(obj) \{

let url;

url = window.URL.createObjectURL(obj.files.item(0));

return url;

export default \{

name: 'accident',

// 定义数据

data () \{

return \{

imgNum:4, //上传的照片数量，可根据实际情况自定义

\},//定义事件

methods:\{

//根据点击上传按钮触发input

change\_input()\{

let inputArr=$('\#addTextForm input');

let add\_inputId=''; //需要被触发的input

for(let i=0;i

// 根据input的value值判断是否已经选择文件

if(!inputArr\[i\].value)\{ //如果没有选择,获得这个input的ID

add\_inputId=inputArr\[i\].id;

break;

if(add\_inputId)\{ //如果需要被触发的input ID存在,将对应的input触发

return $("\#"+add\_inputId).click();

\}else\{

alert("最多选择"+this.imgNum+"张图片")

\},

//当input选择了图片的时候触发,将获得的src赋值到相对应的img

setImg(e)\{

let target=e.target;

$('\#img\_'+target.id).attr('src',getFileUrl(e.srcElement));

\},

//点击图片删除该图片并清除相对的input

deleteImg(e)\{

let target=e.target;

let inputID=''; //需要清除value的input

if(target.nodeName=='IMG')\{

target.src='';

inputID=target.id.replace('img\_',''); //获得需要清除value的input

$('input\#'+inputID).val("");

\},

//提交信息到后台

submit()\{

$("\#addTextForm").ajaxSubmit(\{

url: this.$root.api+"/Index/staff\_accident/add",

type: "post",

data: \{

'total\_price':this.price,

'descript':this.descript,

\},

success: (data) => \{

if(data.code==0)\{

console.log(‘提交成功');

\}else\{

alert('提交失败');

\});

\},

//页面加载后执行

mounted()\{

for(let i=0;i

//生成input框，默认为1

let my\_input = $(''); //创建一个input

my\_input.attr('id',i); //为创建的input添加id

$('\#addTextForm').append(my\_input); //将生成的input追加到指定的form

//生成img，默认为1

let my\_img = $('![Image 1][]');

my\_img.attr('id', 'img\_'+i);

my\_img.css(\{"max-width":"50%","max-height":"200px"\});

//添加样式，由于vue的执行机制，页面加载的时候img标签还没有生成，直接写在style样式会不生效

$('\#img-wrapper').append(my\_img);

\},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持512笔记。

注：关于基于VUE选择上传图片并页面显示(图片可删除)的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js

[Image 1]:

vue删除图片同时删除本地文件_基于VUE选择上传图片并页面显示（图片可删除）...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关利用 ajax 上传图片删除图片 (Spring Boot)

相关 Java接收并上传图片至S3，返回图片URL，并删除本地图片

相关 vue删除图片同时删除本地文件_基于VUE选择上传图片并页面显示（图片可删除）...

相关 uniapp上传图片、展示图片、预览图片、长按删除图片

相关多图片上传删除-vue-element ui 组件

相关 layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）

相关原生PHP列表选项批量删除并同时删除上传图片

相关 vue 上传文件图片

相关 vue element-ui 图片上传/预览/删除功能

相关 Java上传图片到指定位置，删除图片