Vue2-文件上传、下载场景功能

最新推荐文章于 2024-07-16 17:01:04 发布
最新推荐文章于 2024-07-16 17:01:04 发布
阅读量1.8k 收藏 4
点赞数 1
分类专栏： Vue 项目中的记录 文章标签： 腾讯云 云计算
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42995152/article/details/130631398
版权

上传功能

在项目开发中，上传文件的应用场景非常的多，一般情况下，上传的接口都是由公司内部自己开发一套适用于任何场景都可以使用的接口，但是这意味着该接口所涉及到的工作量与技术点就非常的多，且不稳定。于是大公司选择了前者自己研发，小公司则选择了性价比更高的第三方云存储服务，国内知名的云技术服务商基本上是 阿里云 和 腾讯云。以下是腾讯云存储 COS 基本使用流程：

腾讯云存储COS

​ **对象存储（Cloud Object Storage，COS）**是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。

首先进行登录注册 > 实名认证 > 公有读私有写

  • 控制台：https://console.cloud.tencent.com/cos/bucket

    1. 创建存储桶对象，并完成相关配置项
    2. 存储桶 CORS 跨域访问控制：https://console.cloud.tencent.com/cos/bucket?bucket=hr-1305184603&region=ap-guangzhou&type=securityconfig&anchorType=corsSetting

  • 产品 API 文档：https://cloud.tencent.com/document/product/436

  • SDK 下载列表：https://console.cloud.tencent.com/cos/sdk [也可 maven 配置 / npm 下载]

  • Secret 密钥管理：https://console.cloud.tencent.com/cam/capi

使用示例

  • 安装 SDK ：
npm install --save cos-js-sdk-v5
  • 使用：

index.js：

import COS from 'cos-js-sdk-v5'

// 实例化 COS 对象
const cos = new COS({
    SecretID: 'AKIDWquiGXXGNIyOZU9YicGfohNnxsXw5zd1',
    SecretKey: 'A4i6F8mHbfU3MPEn69wUnqdBUXLvFJ7f'
})

// 上传配置
cos.putObject(
 {
    Bucket: 'hr-1305184603', // 存储桶名称
    Region: 'ap-guangzhou', // 存储桶所在地域
    Key: file.uid + '', // 上传的文件对象 id 唯一值，必须是字符串
    StorageClass: 'STANDARD', // 固定值
    Body: file, // 上传的文件对象
    onProgress: (progressData) => { // 上传进度事件
    	/*
    		progressData: {
    			loaded: 1005180, // 已上传文件大小
    			total: 1005180,  // 总上传文件大小
    			speed: 1100963.86,  // 总用时
    			percent: 1 // 进度 1: 完成, 0: 未开始
    		}
    	*/
    }
 },
 (err || data) => { // 上传结果回调函数
    // err 和 data ：二者存其一，有 err 代表上传失败，有 data 代表上传成功，接收一个返回值
    /*
    	data: {
        	ETag: "",  // 有效期标记
            Location: "hr-1305184603.cos.ap-guangzhou.myqcloud.com/1659251801441", // 上传成功的图片地址，可添加 http:// || https:// 前缀
            headers: {content-length: '0'}, // header 头部
            statusCode: 200 // 状态码
        }
    */
  }
)

上传组件封装

uploadImg.vue：

<template>
  <div class="uploadImg">
    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="httpRequest" >
      <img v-if="value" v-globalImgerror="defaultImg" :src="value" class="avatar" @click.stop.prevent="isShow = true" >
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <!-- 删除按钮 -->
    <div v-if="value" class="del" @click="del">X</div>
    <!-- 预览 -->
    <el-dialog title="图片预览" width="500px" :visible.sync="isShow">
      <img style="width: 100%" :src="value" alt="">
    </el-dialog>
    <transition name="fade">
      <el-progress v-if="loading" :percentage="percentage" />
    </transition>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDNXR8bpeSF1JL8EyZopxRfdHgqGUeuEn8',
  SecretKey: 'HJ9mAbQEn7jgjY9swEI6yAamk7MN8hty'
})
export default {
  name: 'UploadImg',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defaultImg: require('@/assets/common/head.jpg'),
      loading: false,
      percentage: 0,
      isShow: false
      //   imageUrl: ''
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      return true
    },
    httpRequest(res) {
      this.loading = true
      this.percentage = 0
      cos.putObject(
        {
          Bucket:
            'dhf481229-1305249343' /* 必须：存储桶，使用自己注册的存储桶 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: res.file.uid + '' /* 必须，要求是字符串 */,
          StorageClass: 'STANDARD', // 固定，不用修改
          Body: res.file, // 上传文件对象
          onProgress: (progressData) => {
            // 上传进度
            this.percentage = progressData.percent * 100
            if (progressData.percent === 1) {
              //   setTimeout(() => {
              this.loading = false
              //   }, 1000)
            }
            console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          // 上传成功的回调  err:代表错误，没有错误就代表成功  data：上传成功的接口返回值
          console.log(err || data)
          this.$emit('input', 'http://' + data.Location)
          //   this.imageUrl = 'http://' + data.Location
        }
      )
    },
    // 删除
    del() {
      this.$emit('input', '')
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.uploadImg {
  position: relative;
  width: 178px;
  &:hover {
    .del {
      display: block;
    }
  }
  .del {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: none;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s;
  }
  .fade-enter {
    opacity: 0;
    // transform: translateY(-100px);
  }
  .fade-leave-to {
    opacity: 0;
    // transform: translateY(100px);
  }
}
</style>

index.vue：

<template>
  <div>
    <h3>上传v-model显示上传地址：{{ imgUrl }}</h3>
    <UploadImg v-model="imgUrl" />
    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :http-request="httpRequest">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDWquiGXXGNIyOZU9YicGfohNnxsXw5zd1',
  SecretKey: 'A4i6F8mHbfU3MPEn69wUnqdBUXLvFJ7f'
})
export default {
  data() {
    return {
      imgUrl: '',
      imageUrl: ''
    }
  },
  methods: {
    // 文件上传成功回调
    handleAvatarSuccess(res, file) {
      console.log(res, file)
    },
    // 上传之前回调
    beforeAvatarUpload(file) {
      const isPng = file.type === 'image/png' || file.type === 'image/jpeg'
      const isLF2M = file.size <= 1024 * 1024 * 2
      if (!isPng) {
        this.$message.error('请上传图片文件')
        return false
      }
      if (!isLF2M) {
        this.$message.error('文件不得超过 2m')
        return false
      }
      return true
    },
    //自定义上传配置回调
    httpRequest(res) {
      // res: 封装的文件对象
      console.log(res)
      cos.putObject(
        {
          Bucket: 'hr-1305184603' /* 必须：存储桶 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: res.file.uid + '' /* 必须，要求是字符串 */,
          StorageClass: 'STANDARD', // 固定，不用修改
          Body: res.file, // 上传文件对象
          onProgress: progressData => {
            // 上传进度
            console.log(progressData)
          }
        },
        (err, data) => {
          // 上传成功的回调  err:代表错误，没有错误就代表成功  data：上传成功的接口返回值
          console.log(err || data)
          this.imageUrl = 'http://' + data.Location
        }
      )
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

下载文件相关场景

本地同源下载

链接下载

场景：同源下载文件。

解决：只需要一个 <a> 、<iframe> 标签即可。

之所以要 <iframe> 标签是因为 <a> 标签会进行跳转，所以需要在当前页面创建一个空的、隐藏的 <iframe> 标签，让 标签的 target 指向它，让用户无感的在内部进行下载。

downloadFile(obj, name, suffix) {
   const url = window.URL.createObjectURL(new Blob([obj]))
   const iframe = document.createElement('iframe')
   iframe.name = 'iframe'
   iframe.style = 'display: none'
   document.body.appendChild(iframe)

   const link = document.createElement('a')
   link.style.display = 'none'
   link.href = url
   link.target = 'iframe' // --不刷新、跳转页面
   const fileName = parseTime(new Date()) + '-' + name + '.' + suffix
   link.setAttribute('download', fileName)

   document.body.appendChild(link)
   link.click()
   link.dispatchEvent(new MouseEvent("click"));
   window.URL.revokeObjectURL(url)

   document.body.removeChild(link)
},

文件流下载

场景：由后台来返回文件流，需要前台用 ajax 进行异步请求并处理

pdf：

const downloads = () => {
   const url = pdf.url
   const filename = pdf.title
   const x = new XMLHttpRequest()
   x.open('GET', url, true)
   x.responseType = 'blob'
   x.onload = () => {
     // 会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
     const url = window.URL.createObjectURL(x.response)
     const a = document.createElement('a')
     a.href = url
     a.download = filename
     a.click()
     a.dispatchEvent(new MouseEvent("click")); // 这里会触发两次 click，主要应对 IE
     window.URL.revokeObjectURL(url);
   }
   x.send()
}

图片：

let url = "后端返回文件流的地址"
fetch(url,{method: 'get',headers:{'Content-Type': 'image/jpeg'}}).then(
    res=>res.blob().then(blob=>{
        var reader = new FileReader();
        reader.readAsDataURL(blob);   // 转换为base64，可以直接放入a标签href
        reader.onload = function (e) {
            var down = document.createElement('a');   // 转换完成，创建一个a标签用于下载
            down.download = name;
            down.href = String(e.target.result);
            // document.appendChild(down)
            down.click();
            down.dispatchEvent(new MouseEvent("click"));
            down.remove();
        }
    })
)

跨域下载文件

场景：后台返回一个不同服务器的文件链接（不限于包括图片、pdf文件），需要前端去下载到本地。这里引发了跨域问题。

解决方案：这个由前端去解决并不是很好，最好是可以让后台先下载好将 blob 数据流返回给前端去处理。

  • 1、如果是固定的一个域名，建立一层 nginx 代理，前端访问代理服务器来绕过跨域问题
  • 2、最好的方案：由后台去下载好文件，然后返回文件流给前端去处理（跨域 => 同源）。

处理代码如下：

图片文件处理
download(href, name) {
  let eleLink = document.createElement('a')
  eleLink.download = name
  eleLink.href = href
  eleLink.click()
  eleLink.remove()
},
downloadByBlob(url, name) {
  let image = new Image()
  image.setAttribute('crossOrigin', 'anonymous')
  image.src = url
  image.onload = () => {
    let canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, image.width, image.height)
    canvas.toBlob(blob => {
      let url = URL.createObjectURL(blob)
      this.download(url, name)
      // 用完释放URL对象
          URL.revokeObjectURL(url)
    })
  }
},
小白菜duang
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2+下载文件（静态文件）
weixin_45236272的博客
07-03 174
【代码】vue2+下载文件。
基于vue2实现下载文件并生成压缩包
qq_34656296的博客
10-20 1107
1. 依赖于两个插件 首先安装插件’
vue2文件上传与下载
最新发布
kukuqiao的博客
07-16 240
若文件立即上传，auto-upload为true，在选择好文件点击打开后便可自动上传。若文件不立刻上传，auto-upload为false，则后续触发上传函数如下。html部分使用element上传组件。触发函数downloadFile。
前端上传文件或者上传文件夹
alisky119的博客
04-03 416
比如1G以上，或者10G以上，100个文件，1000个文件同时传，就有点不行了，主要就是页面反应慢，卡顿。客户那边是政府单位，所以要求提供技术支持服务，数据库用了MySQL，达梦，要求提供前端，后端，控件源代码，需要提供手机，QQ，微信，邮箱等联系方式，需要提供7*24小时技术支持服务，需要提供文档教程，视频教程，远程技术指导。接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表。将up6组件复制到项目中。示例中已经包含此目录。
在vue2项目实现文件上传
我的博客简介
07-12 2579
vue cli 创建项目vue-sample-loader 上面vue代码中有个链接，就是所需上传的接口 上传接口链接把samples/Node.js 文件夹下的内容下载下来，然后执行下面 启动服务
vue2文件流下载
qq_45061461的博客
06-15 1054
的方式将文件信息发送给前端，前端需要接收相应的流信息做出对应的操作。2.处理文件流方法 下载文件。
vue2中实现文件下载
qq_44420579的博客
08-30 2577
vue2、文件下载、js实现下载、接口调用
el-upload上传文件（vue2，Element中的 el-upload文件上传）
热门推荐
weixin_65793170的博客
09-26 1万+
1、首先，我们想要在项目中使用el-upload，就需要在项目中安装Element UI依赖，可以通过npm安装，然后使用全局引入或局部引入，确保项目中可以使用该组件，这里就不多介绍；或者2、安装完成后，在main.js中全局引入使用；局部引入3、然后可以再在Vue组件中，直接使用，下面是el-upload组件的一个使用实例；
vue-simple-uploader for vue3源码
04-22
Vue3大文件分片上传是现代Web开发中处理大文件上传的一种常见技术，尤其是在资源管理、文件分享等应用场景中。`vue-simple-uploader` 是一个适用于 Vue3 的轻量级文件上传组件，它允许开发者方便地实现文件上传功能...
Vue实现带进度条的文件拖动上传功能
08-27
Vue 实现带进度条的文件拖动上传功能 本文主要介绍了使用 Vue 实现带进度条的文件拖动上传功能，通过实例代码给大家介绍的...同时，这个功能也可以与其他技术结合使用，例如与服务器端技术结合使用来实现文件上传。
基于vue-upload-component封装一个图片上传组件的示例
10-17
本文将详细介绍如何基于`vue-upload-component`库封装一个自定义的图片上传组件，以满足多图上传、预览、前端压缩等功能。 ### 1. 需求分析 业务需求通常包括： - **多图上传**：用户可以一次性选择并上传多张图片...
vue实现Excel文件的上传与下载功能的两种方式
10-16
在Vue.js框架中实现Excel文件的上传与下载功能是常见的需求，尤其在处理数据导入导出的场景。本文将详细介绍两种实现方法，旨在提供参考和借鉴。 1. Excel文件的上传 Vue中实现Excel文件上传通常涉及到文件选择、...
vue+springboot 大文件上传
01-23
在文件上传场景中，Vue.js 可以帮助我们创建用户友好的界面，实时反馈上传进度，并处理用户的交互。 ### SpringBoot 简介 SpringBoot 是基于Spring框架的一个简化版本，它简化了配置，使得快速开发成为可能。在大...
手把手带大家实现 vue2+Spring Boot2.7 文件上传功能
weixin_45966674的博客
08-15 1016
然后event参数 就是文件对象 其中的 target下的files 就是文件上传列表 我们去 0下标 就是第一个。这里 我们接收一个 file 参数 就是一个文件流 然后 读取文件名和路径 最后 存储文件。然后 我们点击上的 选择文件 按钮 然后 在弹出框中顺便选择一个本机的图片 点击打开。今天我们主要来实现一下 java WEB中的一个文件的上传和下载。然后 我们来打开 IDEA 处理一下我们的后端代码。
vue2 文件下载/导入/导出 图片上传删除 一键三连
zongzi494的博客
11-07 697
表单中作为字段使用 增加删除。
vue2+下载文件（动态文件）
weixin_45236272的博客
07-15 148
【代码】vue2+下载文件（动态文件）
vue2使用upload组件上传文件的方法
Achong999的博客
05-22 4967
placardFileList ：为了实现图片回显的功能。（thumbnail-mode 模式下此参数无效），placardUpload ：接收子组件传过来的数据。on-success ：文件上传成功时的钩子，on-progress ：文件上传时的钩子，accept ：接受上传的。在使用的.vue文件中使用。
vue2 el-upload上传功能
qq_40287084的博客
03-15 652
vue2 el-upload上传功能
vue2实现文件上传
10-31
Vue2实现文件上传可以使用第三方组件，例如Element UI的Upload组件。在使用该组件时，需要在Vue组件中引入该组件并设置相关参数，例如上传的最大格式、上传的文件列表等。同时，需要在Vue组件中定义上传文件的方法，例如手动上传文件列表、取消上传请求等。具体实现可以参考以下步骤： 1. 在Vue组件中引入Element UI的Upload组件，并设置相关参数，例如上传的最大格式、上传的文件列表等。 2. 在Vue组件中定义上传文件的方法，例如手动上传文件列表、取消上传请求等。 3. 在Vue组件中使用Upload组件，并将上传文件的方法绑定到组件上。 4. 在后端使用相应的技术栈，例如Yii2、Jwt、Mysql等，来处理上传的文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值