图片和视频上传

图片上传插件
链接: https://pan.baidu.com/s/1qabI8cxzGXRN79xdbn9FVw
提取码: 23ic
视频上传插件
链接: https://pan.baidu.com/s/1tRLrVtnKi4nIEF7l9owTiA
提取码: be9f

<div class="form-group" id="share1">
            <label class="col-sm-3 control-label">图片:</label>
            <div id="cupload"></div>
</div>
 <input type="hidden" id="sharePics2"/>
 <div class="form-group" id="share2">
            <label class="col-sm-3 control-label">视频:</label>
            <div class="col-sm-8">
                <div class="fileupload"></div>
            </div>
        </div>
<script type="text/javascript">
    var cupload = new Cupload({
        ele: "#cupload",           // 实例化的DOM对象,必需
        name: "image",              // 图片input的name名,非必需,默认为image
        num: 1,                    // 可上传图片的数量,非必需,默认为1
        width: 148,                  // 预览框的宽,单位为px,非必需,默认为148
        height: 148,                  // 预览框的高,单位为px,非必需,默认为148
        maxSize: 10240                 // 图片大小最大限制,单位为KB,非必需,无默认值
        // minWidth        : 100,                  // 图片宽度最小限制,单位为px,非必需,无默认值
        // minHeight       : 100,                  // 图片高度最小限制,单位为px,非必需,无默认值
        // maxWidth        : 2000,                 // 图片宽度最大限制,单位为px,非必需,无默认值
        // maxHeight       : 2000,                 // 图片高度最大限制,单位为px,非必需,无默认值
        // limitedWidth    : 800,                  // 图片宽度要求,单位为px,非必需,无默认值
        // limitedHeight   : 800,                  // 图片高度要求,单位为px,非必需,无默认值
        //minSize         : 128,                 // 图片大小最小限制,单位为KB,非必需,无默认值
    });
</script>
<script>
    $(".fileupload").filesUpload({
        url:prefix+'/upload',//上传地址
        multiple: false,  //是否多文件上传
        accept: 'audio/*, video/*', //input accept属性
        name:'file',
        fileTypes:'3gp,mp3,mp4,mkv',//文件格式
        buttonText: '选择文件',  //按钮文字
        onUploadStart: function() {
            var fileSize = $("#FileUploadSelf")[0].files[0].size/(1024*1024);
            if(fileSize>10){
                $.modal.alertWarning("上传单个文件大小不能超过10MB!");
                return false;
            }else{
                return true;
            }
        }, //请求开始
        onUploadSuccess: function(res) {
            if (JSON.parse(res.response).msg){
                document.getElementById("sharePics2").value=JSON.parse(res.response).msg;
            }else{
                $.modal.alertWarning("上传路径配置错误!");
            }
        },//请求成功
        onUploadComplete: function() {},//请求完成
        onUploadError:function(res, xhr){//请求错误
            console.log(res,xhr)
        }
    })
</script>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在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中实现图片视频上传前压缩大小的简单示例,希望对你有所帮助!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

匠心点睛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值