视频或者图片上传(vue版本)可直接使用

<div>
   <span>视频上传</span>
   <a href="javascript:;">
     <button>上传</button>
     <input type="file" name="file" @change="uploadUp($event)" 
       enctype="multipart/form-data">
    </a>
</div>


uploadUp(event) {
      var files = event.target.files,file;
       let formData = new FormData();
       formData.append('file', files[0]);
       axios({
          url:"后端的接口地址",
          data:formData,
          method:"post"
       }).then(resp=>{
         console.log(resp);
       })
    },

为了简洁,我把所有的样式都删掉了,功能亲测可用。

  • 0
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue中,可以使用一些库来实现图片和视频上传前压缩大小的功能。下面我将分别介绍两种情况的解决方案。 1. 图片上传前压缩大小: 可以使用`vue-image-compressor`库来实现图片上传前的压缩。首先,安装该库: ```bash npm install vue-image-compressor ``` 然后,在需要进行图片上传组件中,导入并注册该库: ```javascript import VueImageCompressor from 'vue-image-compressor'; export default { components: { VueImageCompressor }, // ... } ``` 接下来,在模板中使用`vue-image-compressor`组件,设置相关属性来进行图片压缩: ```html <template> <div> <vue-image-compressor ref="compressor" :max-width="800" :max-height="600"></vue-image-compressor> <input type="file" @change="compressImage"> </div> </template> <script> export default { methods: { compressImage(event) { const file = event.target.files[0]; this.$refs.compressor.compress(file) .then(compressedImage => { // 压缩后的图片对象 console.log(compressedImage); // 在这里进行图片上传操作 }) .catch(error => { console.error(error); }); } } } </script> ``` 在上述代码中,`max-width`和`max-height`属性用于设置压缩后的图片的最大宽度和高度。通过`this.$refs.compressor.compress(file)`方法来进行图片压缩,返回的`compressedImage`即是压缩后的图片对象,可以在该对象中获取到压缩后的图片数据,然后进行上传操作。 2. 视频上传前压缩大小: 对于视频的压缩,可以使用`vue-video-compressor`库。首先,安装该库: ```bash npm install vue-video-compressor ``` 然后,在需要进行视频上传组件中,导入并注册该库: ```javascript import VueVideoCompressor from 'vue-video-compressor'; export default { components: { VueVideoCompressor }, // ... } ``` 接下来,在模板中使用`vue-video-compressor`组件,设置相关属性来进行视频压缩: ```html <template> <div> <vue-video-compressor ref="compressor" :max-size="10"></vue-video-compressor> <input type="file" @change="compressVideo"> </div> </template> <script> export default { methods: { compressVideo(event) { const file = event.target.files[0]; this.$refs.compressor.compress(file) .then(compressedVideo => { // 压缩后的视频对象 console.log(compressedVideo); // 在这里进行视频上传操作 }) .catch(error => { console.error(error); }); } } } </script> ``` 在上述代码中,`max-size`属性用于设置压缩后的视频文件大小的上限(单位为MB)。通过`this.$refs.compressor.compress(file)`方法来进行视频压缩,返回的`compressedVideo`即是压缩后的视频对象,可以在该对象中获取到压缩后的视频数据,然后进行上传操作。 以上就是在Vue中实现图片和视频上传前压缩大小的简单示例,希望对你有所帮助!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值