笔记—Vue—IView之upload自定义上传列表

最新推荐文章于 2024-03-09 19:57:45 发布
最新推荐文章于 2024-03-09 19:57:45 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： Vue ftp 文章标签： ftp java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46401243/article/details/106419947
版权
Vue 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
ftp
1 篇文章 0 订阅
订阅专栏

在这里插入图片描述
流程：将图片上传通过FTP上传到服务器中，然后回显，
在页面加载时访问后台是否有已存在的图片，如果有加载到列表当中。

1.什么是FTP？
文件传输协议（File Transfer Protocol，FTP）
是一种提供网络之间共享文件的协议，它可以在计算机之间可靠、高效地传送文件。在传输时，传输双方的操作系统、磁盘文件系统类型可以不同。

FTP 协议允许 TCP/IP 网络上的两台计算机之间进行文件传输。而 FTP 服务是基于 FTP 协议的文件传输服务。

工作时，一台计算机上运行 FTP 客户端应用程序，另一台计算机上需要运行 FTP 服务器端程序。只有拥有了 FTP 服务，客户端才能进行文件传输。下面介绍FTP服务的构成和文件传输模式。

FTP 服务构成

上述的文件传输，指的是客户端和FTP服务器端之间的文件传输，如文件上传和下载。要实现文件传输还需要满足两个条件，如下：

服务器端必须开启一个 TCP 端口（默认为 21 端口），用来监听来自客户端的请求。 客户端连接 FTP 服务器端，需要使用 TCP 方式。这样可以保证客户端和服务器之间的会话是可靠的。

客户端与FTP服务器端之间传输一个文件是一次完整的 FTP 会话。该会话包含有两个连接，分别为控制连接和数据连接。其作用如下：

  1. 控制连接：客户端向 FTP 服务器的 21 端口发送连接，服务器接受连接，建立一条命令通道。FTP的命令和应答就是通过控制连接来传输的，这个连接会存在于整个 FTP会话过程中。该连接主要负责将命令从客户端传给服务器，并将服务器的应答返回给客户端。所以，该连接不用于发送数据，只用于传输命令。
  2. 数据连接：每当一个文件在客户端与服务器之间进行传输时，就会创建数据连接。该连接主要用来进行文件传输。

数据格式

在使用 FTP 进行文件传输时，针对不同的文件类型，FTP 提供了两种文件传输模式，分别为 ASCII 和二进制。这两种模式支持的文件如下：
ASCII：用于传输简单的文本文件，为默认类型。
二进制：用于传输程序文件、字处理文档、可执行文件或图片。

FTPUtil

package com.project.management.contractor.common.util;

import com.project.management.contractor.common.constant.FTPConstant;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.net.ftp.FTPClient;
import org.apache.commons.net.ftp.FTPReply;
import org.springframework.stereotype.Component;
import java.io.*;

@Slf4j
@Component
public class FTPUtil {
	
    public static final String ip = "192.168.0.140";
    
    public static final Integer port = 21 ;
    
    public static final String username = "ftpuser";
    
    public static final String password = "ftpuser";

    public static final int connectTimeout = 6000;

    public static FTPClient ftpClient = null;

    public static void initClient() throws IOException {
        ftpClient = new FTPClient();
        ftpClient.setControlEncoding("utf-8");
        ftpClient.setConnectTimeout(connectTimeout);
        ftpClient.connect(ip, port);
        ftpClient.login(username, password);
        int replyCode = ftpClient.getReplyCode();
        if (!FTPReply.isPositiveCompletion(replyCode)){
            log.info("FTP建立连接失败");
        }
        log.info("FTP建立连接成功");
    }

    public static void closeClient() throws IOException {
        ftpClient.logout();
        if (ftpClient.isConnected()){
            ftpClient.disconnect();
        }
        log.info("FTP关闭连接成功");
    }

    public static void uploadFile(String filePath, String fileName,String originFileName) throws IOException {
        try(InputStream inputStream = new FileInputStream(new File(originFileName))){
            initClient();
            ftpClient.setFileType(ftpClient.BINARY_FILE_TYPE);
            ftpClient.changeWorkingDirectory(filePath);
            ftpClient.storeFile(fileName, inputStream);
            ftpClient.logout();
            log.info(fileName + "FTP上传文件成功");
        }finally {
            if (ftpClient.isConnected()){
                ftpClient.disconnect();
            }
        }
    }

    public static void uploadFile(String filePath, String fileName, InputStream inputStream) throws IOException {
        initClient();
        ftpClient.setFileType(ftpClient.BINARY_FILE_TYPE);
        ftpClient.changeWorkingDirectory(filePath);
        ftpClient.storeFile(fileName, inputStream);
        inputStream.close();
        ftpClient.logout();
        if (ftpClient.isConnected()){
            ftpClient.disconnect();
        }
        log.info(fileName + "FTP上传文件成功");
    }

    public static void uploadFile(String filePath, String fileName, File file) throws IOException {
        try(InputStream inputStream = new FileInputStream(file)){
            initClient();
            ftpClient.setFileType(ftpClient.BINARY_FILE_TYPE);
            ftpClient.changeWorkingDirectory(filePath);
            ftpClient.storeFile(fileName, inputStream);
            ftpClient.logout();
            log.info("FTP上传文件成功");
        }finally {
            if (ftpClient.isConnected()){
                ftpClient.disconnect();
            }
        }
    }

    public static void uploadFiles(String filePath, String fileName, InputStream inputStream) throws IOException {
        ftpClient.setFileType(ftpClient.BINARY_FILE_TYPE);
        ftpClient.changeWorkingDirectory(filePath);
        ftpClient.storeFile(fileName, inputStream);
        inputStream.close();
        log.info(fileName + "FTP上传文件成功");
    }

    public static void deleteFile(String filePath, String fileName) throws IOException {
        initClient();
        ftpClient.changeWorkingDirectory(filePath);
        ftpClient.dele(fileName);
        ftpClient.logout();
        if (ftpClient.isConnected())
            ftpClient.disconnect();

        log.info(fileName + "FTP删除文件成功");
    }

    public static void deleteFiles(String filePath, String fileName) throws IOException {
        ftpClient.changeWorkingDirectory(filePath);
        ftpClient.dele(fileName);
        log.info(fileName + "FTP删除文件成功");
    }

    public static byte[] downloadFile(String fileAddress) throws IOException {
        initClient();
        ftpClient.changeWorkingDirectory(FTPConstant.filePath);
        InputStream inputStream = ftpClient.retrieveFileStream(fileAddress);
        byte[] bytes = inputStream2byte(inputStream);
        inputStream.close();
        closeClient();

        return bytes;
    }

    public static byte[] inputStream2byte(InputStream inputStream) throws IOException {
        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
        byte[] buff = new byte[100];
        int rc = 0;
        while ((rc = inputStream.read(buff, 0, 100)) > 0) {
            byteArrayOutputStream.write(buff, 0, rc);
        }
        return byteArrayOutputStream.toByteArray();
    }

}

FTPConstant

public class FTPConstant {
	
	public static final String filePath = "\\pmc\\pmcfile";

    public static final String requestPrefix = "/pmc/pmcfile/";

}

FileTypeUtil

public class FileTypeUtil {
	
	/**
     * 获取文件类型后缀
     * @param file
     * @return
     */
    public static String getFileTypeSuffix(MultipartFile file){
        return file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
    }

}

serviceimpl


/**
 * 文件服务
 * @author Administrator
 */
@Slf4j

public class FileServiceImpl implements FileService{
	
	@Autowired
	private FTPUtil ftpUtil;
	
	@Override
    public Result<FileInfo> uploadFile(MultipartFile file) throws IOException {
        String newName = SysUtil.generateStringId() + FileTypeUtil.getFileTypeSuffix(file);
        ftpUtil.uploadFile(FTPConstant.filePath, newName, file.getInputStream());
        FileInfo fileInfo = new FileInfo();
        fileInfo.setFileName(file.getOriginalFilename());
        fileInfo.setFileAddress(FTPConstant.requestPrefix + newName);
        return new Result<FileInfo>().success(fileInfo);
    }

    @Override
    public Result<?> deleteFile(String fileAddress) throws IOException {
    	ftpUtil.deleteFile(FTPConstant.filePath, fileAddress);
        return Result.ok("单文件删除成功");
    }

    @Override
    public void downloadFile(String fileAddress, HttpServletResponse response) throws IOException {
        
    }

    @Override
    public void downloadFiles(String fileAddress, HttpServletResponse response) {

    }

	

}

以上是ftp工具类
以下是自己的代码

前端

<template>
  <div>
    <div class="demo-upload-list" v-for="item in uploadList">
      <template v-if="item.status === 'finished'">
        <img :src="item.url">
        <div class="demo-upload-list-cover">
          <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
          <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
        </div>
      </template>
      <template v-else>
        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
      </template>
    </div>
    <Upload ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess" :format="['jpg','jpeg','png']"
      :max-size="2048" :data="subdata" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
      :before-upload="handleBeforeUpload" multiple type="drag" action="http://localhost:8092/progress/batchUploadFile"
      style="display: inline-block;width:58px;">
      <div style="width: 58px;height:58px;line-height: 58px;">
        <Icon type="ios-camera" size="20"></Icon>
      </div>
    </Upload>
    <Modal title="查看图片" v-model="visible">
      <img :src="'http://192.168.0.140/static/' + imgName" v-if="visible" style="width: 100%">
    </Modal>
    <br />
    <Button @click="getdata" style="margin-left: 8px">数 据</Button>
  </div>
</template>
<script>
  import {
    postAction,
    getAction,
    putAction,
    deleteAction,
    getSyncAction
  } from '@/libs/request'
  export default {
    data() {
      return {
        subdata: {
          mainid: ''
        },
        defaultList: [
          // {
          //         "name":"微信图片_20191218101204.jpg",
          //         "url":"http://192.168.0.140/static/pmc/pmcfile/f7cdac8d9e4340b8ba99e3b11915526a.jpg",
          //     },
        ],
        imgName: '',
        visible: false,
        uploadList: []
      }
    },
    created() {
      //this.subdata.mainid=this.$route.query.excelid
      this.subdata.mainid = 'd51d3312dab395b4b0342341a88be6c4';

    },
    methods: {
      handleView(name) {
        let str = 'http://192.168.0.140/static/'
        this.imgName = name.substr(str.length - 1);
        this.visible = true;
      },
      handleRemove(file) {
        let str = 'http://192.168.0.140/static/'
        let newurl = (file.url).substr(str.length - 1)
        getAction('/progress/deleteFile', {
          fileAddress: newurl
        }).then(res => {
          console.log("删除状态" + res.data.code);
          const fileList = this.$refs.upload.fileList;
          this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
        })

      },
      handleSuccess(res, file) {
        let resdata = res.data
        file.name = resdata.fileName
        file.url = "http://192.168.0.140/static" + resdata.fileAddress

      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: 'The file format is incorrect',
          desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
        });
      },
      handleMaxSize(file) {
        this.$Notice.warning({
          title: '文件超过最大尺寸',
          desc: '文件：  ' + file.name + ' 太大, 已超过2M.'
        });
      },
      handleBeforeUpload() {
        console.log(this.uploadList.length);
        const check = this.uploadList.length < 5;
        if (!check) {
          this.$Notice.warning({
            title: '最多可上传5张图片.'
          });
        }
        return check;
      },
      getListinfo() {
        // // 第一种 同步
        // let defaltdata = this.defaultList
        // console.log("defaultlist");
        // console.log(this.defaultList);
        // getSyncAction({
        //   url: "http://localhost:8092/progress/selectImages",
        //   data: this.subdata,
        //   success: function(res) {
        //     console.log(3);
        //     let resdata = res.data
        //     resdata.forEach(r => {
        //       defaltdata.push({
        //         name: r.fileName,
        //         url: "http://192.168.0.140/static" + r.fileAddress
        //       })
        //     })

        //   }
        // })



        // 第二种
        let _self = this
         getAction('/progress/selectImages',this.subdata).then(res => {
        let resdata =res.data.data
          resdata.forEach(r=>{
            this.$refs.upload.fileList.push({
            name:r.fileName,
            url:"http://192.168.0.140/static"+r.fileAddress,
            status:'finished',
            percentage:100
            })
          })
        })
      },
      getdata() {
        console.log('upload')
        console.log(JSON.stringify(this.uploadList))
        console.log('default')
        console.log(JSON.stringify(this.defaultList))
      }
    },
    mounted() {
      this.getListinfo();
      this.uploadList = this.$refs.upload.fileList;
    }
  }
</script>
<style>
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
</style>

后台

@Service
public class PmcFileServiceImpl  extends ServiceImpl<PmcFileMapper, PmcFile> implements PmcFileService   {
	@Autowired
	private FileService fileService;
	@Autowired
	private PmcFileMapper mapper;
/**
 * FTP上传图片进度填报
 * @throws IOException 
 */
	@Override
	public Result<FileInfo> batchUploadFile(MultipartFile file,String mainid) throws IOException {
		Result<FileInfo> batchUploadFile = fileService.uploadFile(file);
		if(batchUploadFile.getCode()>0) {
			FileInfo data = batchUploadFile.getData();
			PmcFile fileinfo=new PmcFile();
			fileinfo.setFileName(data.getFileName());
			fileinfo.setFileAddress(data.getFileAddress());
			fileinfo.setMainId(mainid);
			fileinfo.setDelFlag("0");
			System.out.println(fileinfo);
			mapper.insert(fileinfo);
		
		}
		return batchUploadFile;
	}
/**
 * FTP上传图片单文件删除
 * @throws IOException 
 * 
 */
	@Override
	public Result<?> deleteFile(String fileAddress) throws IOException {
		Result<?> deleteFile = fileService.deleteFile(fileAddress);
		if(deleteFile.getCode()>0) {
			UpdateWrapper<PmcFile> updatewrapper =new UpdateWrapper<>();
			updatewrapper.eq("file_address", fileAddress);
			mapper.delete(updatewrapper);
		}
		return Result.ok("删除成功");
	}
//读取已上传的列表 
@Override
public Result<List<FileSelectParamVo>> selectImages(String mainid) {
	QueryWrapper<PmcFile> wrapper =new QueryWrapper<>();
	wrapper.eq("main_id", mainid);
	List<PmcFile> selectList = mapper.selectList(wrapper);
	List<FileSelectParamVo> filelist=new ArrayList<FileSelectParamVo>();
	

	selectList.forEach(list->{
		FileSelectParamVo  filevo=new FileSelectParamVo();
		filevo.setFileAddress(list.getFileAddress());
		filevo.setFileName(list.getFileName());
		filevo.setMainId(list.getMainId());
		filelist.add(filevo);
		
	});
	return new Result<List<FileSelectParamVo>>().success(filelist);
}


}
一只大花卷er
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对于iview框架的上传文件(上传到阿里)进行改进(上传大小到无限 不经过后台)
maple_and_sakura的博客
07-24 379
//子组件 <template> <div> <div style="display: flex;"> <Input :value="currentValue" type="text" clearable placeholder="请输入视频链接" /> <div class="upload ivu-upload" @click="clikcssfd">
Vue上传文件 iview Upload UI 组件上传组件
北方木 南方南
03-13 5577
Vue原生上传文件 原生input支持上传文件 定义type类型，隐藏样式 第三定义change事件拿到file 的相关信息，accept限制支持的文件类型 然后给button增加点击事件 template部分 &amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;button type=&amp;amp;quot;button&amp;amp;quot; @click=&amp;amp;qu
用小程序中的uni方法实现uView中的upload组件并将图片上传到腾讯云
最新发布
m0_64227118的博客
03-09 905
这样就能用uni.chooseimage的方法选择图片并且将图片做处理然后上传到腾讯云上。获取secretId和secretKey。1.新建upload.js文件。
vue iView 上传组件之手动上传功能
08-27
iView 主要服务于 PC 界面的中后台业务，是一套高质量的开源 UI 组件库。这篇文章主要介绍了iView 上传组件之手动上传功能,需要的朋友可以参考下
iview图片自定义上传列表
qq_40295815的博客
08-05 1022
<template> <div> <div class="demo-upload-list" v-for="item in uploadList"> <template v-if="item.status === 'finished'"> <img :src="item.url" /> <div class="demo-u...
iview upload上传文件
zhaofeng的博客
12-19 4247
前端代码 <Upload ref="upload" type="drag" multiple :show-upload-list="true" :before-upload="handleUpload" :data="uploadFile" :on-success="uploadSuccess" action="/api/company/upload"> 选择...
iview Upload实现手动上传文件
weixin_44705310的博客
04-27 1220
【代码】iview Upload实现手动上传文件。
如何使用iview的upload实现vue自定义上传做一个可复用页面
熟悉 vue2 vue3 jquery js echarts
10-12 696
" > < / icon > 点此上传文件 < / div > < p class = "upload_field_big" > 文件大小不超过 upload封装
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
vue中使用iview自定义验证关键词输入框问题及解决方法
08-27
主要介绍了vue中使用iview自定义验证关键词输入框问题及解决方法，本文通过实例结合代码的形式给大家介绍解决方法,需要的朋友可以参考下
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
12-29
vue 封装自定义组件 tabal列表编辑单元格组件 请输入内容 v-loading=editLoading size=small> <el type=text><i class=el-icon-check @
iview Upload 上传图片组件.rar
11-06
该资源时自己根据iview的upload组件封装的上传图片组件，目前一次性上传多张，预览会有问题。
使用iView Upload 组件实现手动上传图片的示例代码
10-17
主要介绍了使用iView Upload 组件实现手动上传图片的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iview upload 上传图片
sunny_day的博客
01-11 908
<span class="up_img">上傳圖片:&nbsp;&nbsp;&nbsp;</span> <div class="demo-upload-list" v-for="item in uploadList"> <div v-if="item.status === 'finished'"&...
iview上传图片
weixin_43843679的博客
07-01 297
<template> <div class="uploader-container"> <div class="demo-upload-list" v-for="(item, index) in uploadList" :key="index"> <template v-if="item.status === 'finished'"> <img :src="item.url" /> <d
iview upload组件使用 实现图片上传
weixin_38704390的博客
07-27 761
vue实现图片上传
iview upload 关闭自带列表展示和仅用beforeUpload事件
Blue__Summer的博客
03-03 276
/ defaultList:默认列表数据,flag:同一个页面多次用组件时,用来判断数据归属字段,uploadList:上传列表数据。-- 该组件只用到了iview-upload组件的beforeUpload功能,默认列表展示和上传列表展示重新编译判断,关闭了组件自带的列表展示功能 -->-- 该组件适用于文件上传和表单上传接口分离的情况下 -->//阻止图片继续上传，使得form表单提交时统一上传。("最多只能上传五张照片!// 删除照片(上传列表)// 删除照片(默认列表)
基于iview upload组件的上传图片
weixin_46688629的博客
08-06 574
最近由于开发需求，使用iview的Upload组件实现上传图片，但在开发过程中遇到了一个很困扰的问题：由于图片是延缓加载的，执行的过程其实是图片已经上传之后才会去调用检测图片大小的方法，没有达到预期的目的，官方文档显示before-upload可以返回false或者Promise来阻止事件，以下为Promise方法，欢迎提供false方法。 前端代码： <Upload ref="upload" :show-upload-list="false" :before-uploa
为什么有些网友发表的文章，图片没有显示？
lu12077的博客
09-13 1945
为什么有些网友发表的文章，图片没有显示一、 文章图片显示不出来，分析原因：原因分析：二、验证方法：三、今后遇到无法 网页无法显示图片 一、 文章图片显示不出来，分析原因： 在网上查找资料，寻找问题答案时，小伙伴们经常碰到这种图片不显示的情况： 图片无法正常显示，有图片错误的图标。 图片压根不出来，没显示。 原因分析： 图片路径不对，或者图片资源被删除（web服务器） 不存在了，或者图片资源被墙了（国外的图片资源，防火长城 自己了解去）。 图片资源被加了防盗链。 二、验证方法： 将图片路径 拷
vue3 el-upload自定义上传视频
08-17
要自定义 el-upload 组件的视频上传行为，你可以使用 `custom-request` 属性来替代 `action` 属性，并在上传视频时执行自定义的上传逻辑。下面是一个示例： ```html <template> <el-upload class="upload-demo" :custom-request="uploadVideo" :before-upload="beforeUpload" :auto-

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值