使用elementui上传OSS服务器时点击取消按钮时删除已上传的图片

最新推荐文章于 2024-06-03 17:21:51 发布

jq1223

最新推荐文章于 2024-06-03 17:21:51 发布

阅读量1.5k

点赞数 2

分类专栏： Vue 服务器 elementui

本文链接：https://blog.csdn.net/jq1223/article/details/114703570

版权

Vue 同时被 3 个专栏收录

58 篇文章 2 订阅

订阅专栏

elementui

40 篇文章 1 订阅

订阅专栏

服务器

38 篇文章 1 订阅

订阅专栏

展示

注：本项目做的时候是前后端分离项目
做功能之前首先要考虑几个问题：
1.用户点击以下图片中的1时，X号时把上传的图片删除
2.用户点击以下图片中的2时，点击空白处时把上传的图片删除
3.用户点击以下图片中的3时，点击提交时新增成功
3.用户点击以下图片中的4时，点击取消时把上传的图片删除

注：file1，file，imageUrl这三个变量解释
问：为什么使用3个变量
答：第一 file1，file分别是2个上传照片缓存属性
问：既然缓存属性为什么还定义了imageUrl
答：这个是从缓存中取得就是防止有客户一直上传就是不新增，这样会让服务器多出好多垃圾数据，就如上面视频上的一样，就是为了防止随意上传，不确认就不新增就把已上传服务器的图片都删除
在这里插入图片描述
步骤：
1.首先需要一个全局close事件无论点击任何地方都必须close触发事件 close Dialog 关闭的回调，然后将这个事件先定义出来

2.data中3个变量定义，为什么是2个图片变量那，因为我上传两个图

		data() {
       	 return {
			//对象 
            brand:{
                bigPic: '', //实体类属性 图片
                logo: '', //实体类属性 图片
            }
           }
          }

       data() {
        return {
            file1:'', //用于新增或取消删除老图片
            file:'',//用于新增或取消删除老图片
            btn:null, //判断按钮使用  用于判断当前点击的是什么按钮
        }
       },
       //接上传图片成功回调中的值
       computed: {
        imageUrl() {
            let imageUrl= localStorage.getItem('imageUrl');
            return imageUrl ? imageUrl : this.imageUrl;
        }

    },

3.给btn赋值用于判断当前点击的是什么按钮


        //点击弹框提交时,新增
        onSubmit(brandFrom){
            this.btn = 1, 
        }
        //点击编辑按钮时
        handleEdit(id){
        	//代表点击修改按钮
            this.btn = 2;
        }
		//取消按钮
        cancel(){
            this.btn=3; 
            this.editVisible=false //关闭弹框
        }

4.给图片变量赋值：

       //回显数据
        handleEdit(id){
            this.btn = 2,
            seleteBrandById(id).then(response => {
                this.editVisible = true;
                this.brand = response.data.data;
              
                //用于新增或取消删除老图片
                this.file1=response.data.data.bigPic;
                //用于新增或取消删除老图片
                this.file=response.data.data.logo;

            }).catch(res => {
                this.$message.error("获取品牌信息失败");
            })

        },

上传图片成功后传值：

定义一个数组
在这里插入图片描述

5.开始具体判断

 //取消删除已上传的图片
        close: function (brandFrom) {
            //走新增的方法
            if (this.btn == 1) {
                //修改的时候的方法
            }else if(this.btn == 2){
                var images = [];
                if(  this.file!=this.brand.logo){
                    images.push(this.brand.logo)
                }
                if( this.file1!=this.brand.bigPic ){
                    images.push(this.brand.bigPic)
                }
                //发送请求
                deleteFile({"images":images.toString()}).then(response => {
               })
            }
            //取消时删除已上传的图片的方法
             else {
                    //取消删除已上传的图片
                     let images=[];
                     //this.imageUrl是上面接过来的缓存中的
                     images.push(this.imageUrl)
                     deleteFile({"images":images.toString()}).then(response => {
                    //刷新  因为这个值存在缓存中不刷新下次就用不了拉
                    window.location.reload()
                })

                }
            }
        }

6.发起请求：

//点击取消是批量删除已上传的图片
export const deleteFile = images=> {
    return request({
        url:'http://localhost:8080/upload/deleteFile',
        method: 'post',
        params: images
    });
};

7.在Controller类代码：

package com.ff.controller;
import com.ff.oss.OSSUtil;
import com.ff.result.ResultObj;
import org.apache.commons.lang3.StringUtils;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/upload")
@CrossOrigin
public class OSSController {

      //删除图片upload
    @RequestMapping("deleteFile")
    public void deleteFile(String images) {
        //批量时删除图片
        if(images!=null) {
            //删除图片
            String split[] = images.split(",");
            for (int i = 0; i <split.length ; i++) {
               OSSUtil.deleteFile(split[i]);
            }

        }

    }


}

7.在工具类代码：

package com.ff.oss;

import com.aliyun.oss.OSSClient;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

public class OSSUtil {

    // 阿里云oss上传文件相关属性值
    // 阿里云API的外网域名
   public static final String ENDPOINT = "oss-cn-beijing.aliyuncs.com";

    // 阿里云API的密钥
   public static final String ACCESS_KEY_ID = "LTAI4Fzm3c6EmUexCHLvZNcm";

    // 阿里云API的密钥Access Key Secret
   public static final String ACCESS_KEY_SECRET = "b8OrjTpYWW3sZSlimy4sxr2WJuNX09";

    // 阿里云API的bucket名称
    public static final String BACKET_NAME = "jjjqqq";

    // 阿里云API的文件夹名称
    public static final String FOLDER = "photo/";

    public static final String URl = "https://jjjqqq.oss-cn-beijing.aliyuncs.com/";


    public static void deleteFile(String fileName){
        OSSClient ossClient = new OSSClient(ENDPOINT,ACCESS_KEY_ID,ACCESS_KEY_SECRET);
        //给fileName重新赋值
        String replace = fileName.replace(URl, "");
        //删除
        ossClient.deleteObject(BACKET_NAME,replace);
        ossClient.shutdown();
    }



    //图片上传
    public static String uploadFile(MultipartFile file){
        OSSClient ossClient=null;
        InputStream is=null;
        String filePath =null;

        try {
            //创建ossclient对象 key secret 创建
            ossClient=new OSSClient(ENDPOINT,ACCESS_KEY_ID,ACCESS_KEY_SECRET);
            //获取文件名
            String fileName = file.getOriginalFilename();
            //获取后缀
            String suffix = fileName.substring(fileName.lastIndexOf("."));
            //获取文件新名称
            String newFileName =  UUID.randomUUID()+suffix;

            is = file.getInputStream();

            //创建一个已当前时间为文件的文件夹
            SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyy-MM-dd");
            String folderName = simpleDateFormat.format(new Date());

            //BUCKET_NAME 文件 file
            ossClient.putObject(BACKET_NAME,folderName+"/"+newFileName,is);

            filePath = URl+folderName+"/"+newFileName;
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if(is != null){
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if(ossClient != null){
                ossClient.shutdown();
            }
        }


        return filePath;
    }


}

下面是前端具体代码:

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 品牌列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
           <!--搜索栏-->

            <div class="handle-box">
                <el-button type="primary" icon="el-icon-plue" class="handle-del mr10" @click="openAdd">添加</el-button>
                <el-button type="danger" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除</el-button>
                <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
          <!--列表栏-->
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="编号" width="55" align="center">
                    <template slot-scope="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="品牌名"></el-table-column>
                <el-table-column prop="firstLetter" label="首字母"></el-table-column>
                <el-table-column prop="sort" label="排序"></el-table-column>
                <el-table-column label="品牌logo" align="center">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-logo"
                            :src="scope.row.logo"
                            :preview-src-list="[scope.row.logo]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="品牌制造商" width="100" align="center">
                    <template slot-scope="scope">
                        <el-switch
                                @change="handleFactoryStatusChange(scope.row)"
                                :active-value="1"
                                :inactive-value="0"
                                v-model="scope.row.factoryStatus">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="是否显示" width="100" align="center">
                    <template slot-scope="scope">
                        <el-switch
                                @change="handleShowStatusChange(scope.row)"
                                :active-value="1"
                                :inactive-value="0"
                                v-model="scope.row.showStatus">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="productCount" label="产品数量"></el-table-column>
                <el-table-column prop="productCommentCount" label="产品评论数量"></el-table-column>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
          <!--分页栏-->
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageNum"
                    :page-size="query.pageSize"
                    :total="total"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" v-dialogDrag    @close="close('brandFrom')" width="40%">
            <el-form :model="brand"  ref="brandFrom" label-width="150px">
                <el-form-item label="品牌名称：" prop="name">
                    <el-input v-model="brand.name"></el-input>
                </el-form-item>
                <el-form-item label="品牌首字母：" prop="firstLetter">
                    <el-input v-model="brand.firstLetter"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO：" prop="logo">
                    <single-upload v-model="brand.logo"></single-upload>
                </el-form-item>
                <el-form-item label="品牌专区大图：" prop="bigPic">
                    <single-upload v-model="brand.bigPic"></single-upload>
                </el-form-item>
                <el-form-item label="排序：" prop="sort" >
                    <el-input v-model.number="brand.sort" type="number"></el-input>
                </el-form-item>
                <el-form-item label="是否显示：" prop="showStatus">
                    <el-radio-group v-model="brand.showStatus">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="品牌制造商：" prop="factoryStatus">
                    <el-radio-group v-model="brand.factoryStatus">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button>
                    <el-button  @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {queryBrandList,updateFactoryStatus,updateShowStatus,saveOrUpdate,deleteBrand,deleteBath,seleteBrandById,deleteFile} from "../../../api/pms/brand/brand";
//引入图片插件
import SingleUpload from '../../../components/upload/singleUpload'
export default {
    name: 'brand',
    //加载图片插件
    components:{SingleUpload},

    data() {
        return {

            brand:{
                id:null,
                bigPic: '',
                brandStory: '',
                factoryStatus: 0,
                firstLetter: '',
                logo: '',
                name: '',
                showStatus: 0,
                sort: 0,
                img:"", //用于修改时删除老图片
                img1:""//用于修改时删除老图片
            },
            query: {
                address: '',
                name: '',
                pageNum: 1,
                pageSize: 5,
            },
            tableData: [],
            multipleSelection: [],
            file1:[], //用于取消删除老图片
            file:[],//用于取消删除老图片
            title:'',
            delList: [],
            editVisible: false,
            total: 0,
            form: {},
            btn:null, //判断按钮使用
            idx: -1,
            id: -1
        };
    },

    created() {
        this.getData();
    },
    computed: {
        imageUrl() {
            let imageUrl= localStorage.getItem('imageUrl');
            return imageUrl ? imageUrl : this.imageUrl;
        }

    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
          queryBrandList(this.query).then(res => {
                this.tableData = res.data.data.list;
                this.total = res.data.data.total;

          });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageNum', 1);
            this.getData();
        },
        // 删除操作
        handleDelete(row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                 deleteBrand(row).then(response=>{
                     this.$message.success(response.data.msg);
                     // 删除最后一页数据跳转回上一页
                     const totalPage = Math.ceil((this.total - 1) / this.query.pageSize) // 剩余数据总页数
                     this.query.pageNum = this.query.pageNum > totalPage ? totalPage : this.query.pageNum
                     this.query.pageNum = this.query.pageNum < 1 ? 1 : this.query.pageNum

                     this.getData();
                 })
                }).catch(() => {
                this.$message.error(response.data.msg);
                });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //批量删除
        delAllSelection() {
            const length = this.multipleSelection.length;
            if(length>0){
                // 二次确认删除
                this.$confirm('您确定都要删除吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    var ids=[];
                    for (let i = 0; i <this.multipleSelection.length ; i++) {
                        ids.push(this.multipleSelection[i].id);
                    }
                    deleteBath({"ids":ids.toString()}).then(response=>{
                        this.$message.success(response.data.msg);

                         // 批量删除最后一页数据跳转回上一页
                         const totalPage = Math.ceil((this.total - this.multipleSelection.length) / this.query.pageSize) // 剩余数据总页数
                         this.query.pageNum = this.query.pageNum > totalPage ? totalPage : this.query.pageNum
                        this.query.pageNum = this.query.pageNum < 1 ? 1 : this.query.pageNum
                        //查询
                        this.getData();
                    })
                }).catch(() => {
                    this.$message.error("请选择要删除的数据");
                });
            }
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.getData();
        },
        修改是否品牌供应商
        handleFactoryStatusChange(row) {
            var data ={
                "id":row.id,
                "factoryStatus":row.factoryStatus
            }
            updateFactoryStatus(data).then(response=>{
                this.$message.success(response.data.msg);

            }).catch(res=>{
                this.$message.error("修改品牌供应商失败");
                this.getData();
            })
        },
        //修改是否显示
        handleShowStatusChange(row) {
            var data ={
                "id":row.id,
                "showStatus":row.showStatus
            }
            updateShowStatus(data).then(response=>{
                this.$message.success(response.data.msg);

            }).catch(res=>{
                this.$message.error("修改品牌失败");
                this.getData();
            })
        },
        // 打开添加页面
        openAdd(){

            this.editVisible = true
            //清空表单数据
            for (var key in this.brand){
                this.brand[key] = null
            }
        },
        //添加品牌
        onSubmit(brandFrom){
            this.btn = 1,
            saveOrUpdate(this.brand).then(response => {
                this.$message.success(this.brand.id==null?"添加成功":"修改成功");
                this.getData();
                this.editVisible = false;
            }).catch(res => {
                this.$message.error(this.brand.id==null?"添加失败":"修改失败");
            })
        },
        //回显
        handleEdit(id){
            this.btn = 2,
            seleteBrandById(id).then(response => {
                this.editVisible = true;
                this.brand = response.data.data;
                //赋值用于修改时删除老图片
                this.brand.img=response.data.data.bigPic;
                //赋值用于修改时删除老图片
                this.brand.img1=response.data.data.logo;

                //用于取消删除老图片
                this.file1=response.data.data.bigPic;
                //用于取消删除老图片
                this.file=response.data.data.logo;

            }).catch(res => {
                this.$message.error("获取品牌信息失败");
            })

        },
        //取消按钮
        cancel(){
            this.btn=3;
            this.editVisible=false
        },
        //取消删除已上传的图片
        close: function (brandFrom) {
            //走新增的方法
            if (this.btn == 1) {
                //修改的方法
            }else if(this.btn == 2){
                var images = [];
                if(  this.file!=this.brand.logo){
                    images.push(this.brand.logo)
                }
                if( this.file1!=this.brand.bigPic ){
                    images.push(this.brand.bigPic)
                }
                //发送请求
                deleteFile({"images":images.toString()}).then(response => {
               })
            }
            //取消删除已上传的图片的方法
             else {
                     //取消删除已上传的图片
                     let images=[];
                     images.push(this.imageUrl)

                deleteFile({"images":images.toString()}).then(response => {
                    //刷新  因为这个值存在缓存中不刷新下次就用不了拉
                    window.location.reload()
                })

            }
        },


    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-logo {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>

图片封装图片.Vue

<template>
  <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
    <img v-if="imgUrl" :src="imgUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
  export default {
    name: "SingleUpload",
    props:{
      value:String
    },
    computed:{
      imgUrl(){
        return this.value;
      }
    },
    data() {
      return {
        //定义数组接值
        imageUrl:[],
      }
    },
    methods: {
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl.push(res.data);
        //传值
       localStorage.setItem('imageUrl', this.imageUrl);
        this.emitInput(res.data);
      },
      emitInput(val){
        this.$emit('input',val);

      }
    },
    mounted() {
    }
  }
</script>

<style >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 90px;
    height: 90px;
    display: block;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
  }
  .avatar {
    width: 90px;
    height: 90px;
    display: block;
  }
</style>

请求代码brand.js页面：

import request from '../../../utils/request';

//查询数据
export const queryBrandList = query => {
    return request({
        url: 'http://localhost:8080/brand',
        method: 'get',
        params: query
    });
};
//修改是否显示
export const updateShowStatus = query => {
    return request({
        url:'http://localhost:8080/brand/showStatus',
        method: 'post',
        params: query
    });
};
//修改是否品牌供应商
export const updateFactoryStatus = query => {
    return request({
        url:'http://localhost:8080/brand/factoryStatus',
        method: 'post',
        params: query
    });
};
//修改或新增
export const saveOrUpdate = query => {
    return request({
        url:'http://localhost:8080/brand/saveOrUpdate',
        method: 'post',
        params: query
    });
};

//删除
export const deleteBrand = row => {
    return request({
        url:'http://localhost:8080/brand',
        method: 'delete',
        params: row
    });
};


//批量删除
export const deleteBath = ids => {
    return request({
        url:'http://localhost:8080/brand/deleteBath',
        method: 'post',
        params: ids
    });
};

//点击取消是批量删除已上传的图片
export const deleteFile = images=> {
    return request({
        url:'http://localhost:8080/upload/deleteFile',
        method: 'post',
        params: images
    });
};


//回显数据
export const seleteBrandById = id => {
    return request({
        url: 'http://localhost:8080/brand/'+id,
        method: 'get',
    });
};

request.js页面

import axios from 'axios';

const service = axios.create({
    timeout: 5000
});
export default service;

删除时，修改时，和批量删除图片请点击

jq1223

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录