美文网首页
表单中的图片文件上传!

表单中的图片文件上传!

作者: jesse28 | 来源:发表于2021-02-02 15:14 被阅读0次

接口文档:


image.png

1.:on-success="handleSuccess" //上传成功时触发的方法


image.png

handleSuccess(file) {
//file.data.tmp_path   图片临时上传的路径
  console.log("成功");
  console.log(file);
            },

2.:on-remove="handleRemove" //移除时候触发的方法


image.png
//移除的时候触发的方法
handleRemove(file, fileList) {
    //file.response.data.tmp_path  图片临时上传的路径console.log("移除")
    //从this.form.pics 移除当前 X 掉的图片
    //先获取该图片的索引
    //findIndex((item)=>{})遍历 把符合条件的元素的索引进行返回
    //[{pic:图片路径},{pic:图片路径}]
    
    let Index = this.form.pics.findIndex((item)=>{
        return item.pic === file.response.data.tmp_data; 
    })
    this.form.pics.splice(Index,1);
    console.log(file, fileList);    
},
image.png
image.png

代码注解:

<template>
    <div>
        //注意这边的图片上传也是一个向后端发请求,也是需要带上token的头部请求
        <el-form-item>
            <el-upload 
            action="http://localhost:8888/api/private/v1/upload"   //这边要写全路径,因为baseURl是基于axios请求,这边的upload不是基于axios
            :on-preview="handlePreview" 
            :header="headers"
            :on-remove="handleRemove" //移除时候触发的方法
            :on-success="handleSuccess" //上传成功时触发的方法
            :file-list="fileList" 
            list-type="picture">  //上传类型为图片
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
            </el-upload>
        </el-form-item>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                form:{
                    pics:[]
                },
                headers:{
                    Authorization:localStorage.getItem('token')
                }
            };
        },
        methods: {
            handlePreview(file) {
                console.log(file);
            },
            //移除的时候触发的方法
            handleRemove(file, fileList) {
                //file.response.data.tmp_path  图片临时上传的路径
                console.log("移除")
                //从this.form.pics 移除当前 X 掉的图片
                //先获取该图片的索引
                //findIndex((item)=>{})遍历 把符合条件的元素的索引进行返回
                //[{pic:图片路径},{pic:图片路径}]
                
                let Index = this.form.pics.findIndex((item)=>{
                    return item.pic === file.response.data.tmp_data; 
                })
                this.form.pics.splice(Index,1);
                console.log(file, fileList);    
            },
            //成功时候触发的方法
            handleSuccess(file) {
                //file.data.tmp_path   图片临时上传的路径
                console.log("成功");
                console.log(file);
                //给this.form.pics
                this.form.pics.push({
                    pic:file.data.tmp_data
                })
            },
        }
    }
</script>

相关文章

  • POST请求之表单上传图片

    POST请求之表单上传图片 表单上传: 表单上传一般是用于上传大型文件给服务器,比如图片、视频、音频等,由于服务器...

  • 表单中的图片文件上传!

    接口文档: 1.:on-success="handleSuccess" //上传成功时触发的方法 2.:on-re...

  • 2020-05-15

    jeecgboot框架——文件(图片)上传下载代码 表单文件(图片)上传代码

  • PHP文件上传(以图片为例)

    0.上传单张图片 用户通过表单将文件上传到服务器,我们先来看下表单结构: 这里使用了含文件上传控件的表单,必须将f...

  • node小应用-图片上传

    ex: 请求url时,可以看到一个欢迎页面,页面上有文件上传的表单,选择图片提交表单,文件上传到http://do...

  • PHP学习笔记之文件上传类代码实现

    文件上传类代码示例: 单文件上传表单: 多文件上传表单: 文件上传处理php代码:

  • 文件上传的几种方式

    方式一:form表单文件上传 图片上传的请求方式必须为post enctype="multipart/form-d...

  • 基于Base64编/解码算法的Spring Boot文件上传技术

    文件上传时Web应用最为常见的功能之一,传统的文件上传需要定制一个特殊的form表单来上传文件,以上传图片为例,常...

  • 第十六章 文章上传和下载

    文件上传 多数文件上传都是通过表单形式提交给后台服务器,因此,要实现文件上传,就要提供一个文件上传的表单,而该表单...

  • JavaWeb之 上传下载

    文件上传 文件上传如何实现 form表单 表单method="post" 表单增加属性 enctype="mult...

网友评论

      本文标题:表单中的图片文件上传!

      本文链接:https://www.haomeiwen.com/subject/wdpetltx.html