Vue【前端】——上传图片

本文介绍了使用Vue组件实现图片上传到fastDFS的过程,并在Vue的table中展示图片。通过iview的上传组件,设置action为文件服务器地址,成功上传后获取后端返回的图片URL,展示了Vue的便捷性。

    今天小咸儿实践了使用Vue上传图片的功能,在经过多次的实践之后,终于实现了上传图片,开心之情不能言表。(^▽^)

    另外,还要说明一下Vue组件封装之强大,使上传图片方便很多。

    主要讲述的还是前端如何向fastDFS上传图片以及在Vue的table中显示出来:

    在Vue页面中的中写明:

    首先引用iview中的上传图片的组件,如图所示:
这里写图片描述

    其中的action写的就是上传图片的最终文件服务器地址或者后端上传图片方法的地址,:format则是能够接受上传图片的格式。

    接下来就是上传图片成功的事件:on-success中的“unloadSuccess”,但是实际上你已经把图片通过地址链接到后端的方法上传到fastDFS上了,接下来在“unloadSuccess”中写的是:

    获取后端的返回值:url
这里写图片描述

    这个时候,图片上传后的url就已经获取到了,是不是十分的简单呢?重要的还是Vue已经把上传图片给封装好了,只需要咱们给提供一个方法地址或者文件服务器地址就好了(也就是action中)。后端代码就不在赘述了。

    这次小咸儿真的是体会到Vue的简单、灵活与强大了。

### Vue.js 中 MinIO 文件上传与下载实现 #### 连接 MinIO 服务并初始化客户端 为了在 Vue 前端项目中集成 MinIO 的文件上传和下载功能,首先需要安装 `minio` 和其他必要的依赖项。通过命令行工具执行如下操作来完成环境准备: ```bash npm install minio --save ``` 接着,在项目的合适位置创建一个新的 JavaScript 文件用于配置 MinIO 客户端实例[^3]。 ```javascript // src/utils/minioClient.js import { Client } from 'minio'; const client = new Client({ endPoint: 'play.min.io', port: 9000, useSSL: true, accessKey: 'YOUR-ACCESSKEYID', secretKey: 'YOUR-SECRETACCESSKEY' }); export default client; ``` #### 文件上传逻辑设计 对于文件上传部分,考虑到用户体验以及网络状况等因素的影响,建议采用分片上传的方式处理较大尺寸的文件。下面给出一段简化版的异步函数用来逐个发送文件片段至指定 URL 地址,并实时更新当前已完成的比例信息给用户界面显示[^2]。 ```javascript async function uploadFile(file) { const chunkSize = 5 * 1024 * 1024; // 每次传输的数据大小为5MB let start = 0; while (start < file.size) { const end = Math.min(start + chunkSize, file.size); const blobSlice = File.prototype.slice.call(file, start, end); await fetch('/api/upload-url', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({filename: file.name}) }).then(response => response.json()) .then(data => { return data.url; }) .then(uploadUrl => { return fetch(uploadUrl, { method: 'PUT', body: blobSlice }); }); start += chunkSize; updateProgress(Math.round((start / file.size) * 100)); } } ``` 此代码段展示了如何利用浏览器内置 API 对象 `fetch()` 来发起 HTTP 请求并将二进制流作为请求体的一部分传递出去;同时也体现了当某个特定条件满足时(即所有切片均已成功提交),调用额外的方法通知后端程序结束整个过程[^4]。 #### 文件下载逻辑设计 针对文件下载场景,则相对较为简单直接——只需向服务器发出 GET 类型的请求即可获得目标资源的内容。这里提供了一个基础的例子说明怎样构建这样的交互行为。 ```html <!-- template --> <button @click="downloadFile">Download</button> <script setup lang="ts"> import { ref } from 'vue'; import axios from 'axios'; function downloadFile() { axios({ url: '/path/to/file', method: 'GET', responseType: 'blob' // important }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file.ext'); // or any other extension document.body.appendChild(link); link.click(); }); } </script> ``` 上述示例中运用到了 Axios 库来进行 AJAX 调用,同时借助 HTML5 提供的新特性实现了自动触发保存对话框的功能,从而让用户能够方便快捷地获取所需材料。
评论 48
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值