iView上传文件控件的使用(预览+控制上传)

场景:  我们希望iView上传控件使用过程中，通过我们的点击按钮确认好了才上传。

而不是通过设置action地址，点击之后立马就上传。

注:1. 这种场景适用于很多的表单元素，上传的文件只是其中之一。用户点击提交按钮时，统一上传。

2.用户本身就要对上传的文件进行初步处理，比方说预览，删除操作。

 

vue组件代码:

css使用iview官网提供的

<style>
    .demo-upload-list{
        display: inline-block;
        width: 100px;
        height: 100px;
        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>
<template>
    <div>
        <Row>
            <Col span="6">
                <Card >
                    <div class="demo-upload-list" v-for="item in file">
                        <img  :src="item.src" />
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click="handleView(item)"></Icon>
                            <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
                        </div>
                    </div>
                </Card>
            </Col>

            <Col span="12" style="margin-top: 100px;">
                <Upload
                     multiple
                    :before-upload="handleUpload"
                    :action = action
                    :format="['jpg','jpeg','png']"
                    :on-format-error="uploadFormatError"
                >
                    <Button icon="ios-cloud-upload-outline">上传附件</Button>
                </Upload>
                <Button type="success" style="width: 100px;" @click="upload()">提交</Button>
            </Col>
        </Row>


        <Modal title="View Image" width="50" v-model="viewModal" footer-hide>
            <div>
                <img :src="src" style="width: 100%"/>
            </div>
        </Modal>

    </div>
</template>

<script>

    export default {

        data() {
            return {
                // 预览图片的src
                src:'',
                // 预览图片Modal
                viewModal:false,
                // 随便写个地址
                action: 'notice/run',
                // 上传文件
                file: [],
            }
        },

        created() {

        },

        mounted() {

        },

        methods: {

            /**
             *  方法作用:  去除上传文件
             *  时间: 2018年12月12日 18:51:38
             *  创建人:  Cr
             **/
            handleRemove (file) {
                this.file.splice(this.file.indexOf(file), 1);
            },

            /**
             *  方法作用:  上传类型错误提示
             *  时间: 2018年12月12日 18:51:38
             *  创建人:  Cr
             **/
            uploadFormatError(){
                this.$Message.error('上传类型只能是jpg,jpeg,png');
            },

            /**
             *  方法作用:  预览图片
             *  时间: 2018年12月12日 18:51:38
             *  创建人:  Cr
             **/
            handleView (item) {
                this.src = item.src;
                this.viewModal = true;
            },

            /**
             *  方法作用:  获取上传文件,并去掉重复的文件
             *  时间: 2018年11月26日 18:38:13
             *  创建人:  Cr
             **/
            handleUpload (file) {
                file.src = this.convertSrc(file);
                this.file.push(file);
                // false代表不上传到action的地址，true的话会报错，因为action地址是瞎写的，action地址不写会报错。
                return false;
            },

            /**
             *  方法作用:  上传
             *  时间: 2018年11月26日 18:38:13
             *  创建人:  Cr
             **/
            upload(){
                let that = this;

                if(that.file.length == 0){
                    that.$Message.error('上传文件不能为空');
                    return;
                }

                let formData = new FormData();

                for(let i = 0; i < that.file.length; i++) {
                    formData.append('file', that.file[i]);
                }

                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
                    }
                };

               /* that.$ajax.post('/upload',formData, config).then(response => {

                });*/

            },

            /**
             *  方法作用:  转换成SRC显示在页面上
             *  时间: 2018年11月26日 18:38:13
             *  创建人:  Cr
             **/
            convertSrc(file){
                return window.URL.createObjectURL(file);
            },

        },
    }
</script>

 

 

附上效果图:

 

 

 

2020年3月19日 10:19:24

近期有小伙伴在使用的过程中出现了问题(window.URL.createObjectURL is not a function或 Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.)

接到评论和私信后，我自身通过以下步骤进行了测试，下面是我对这个问题的一些整理。

1.为什么会出现这种情况:

      在博主代码上进行了业务上的修改导致。
      本章的主体内容是在上传前控制文件信息，打印图片信息等。而很多朋友却是在上传成功后进行处理。

2. 为什么在上传成功后调用这个方法不行。

    

 请大家仔细看这两张图片, 分别是上传前钩子传输的file对象和上传成功后传输的file对象。

具有很大不同， 上传前的file对象应该是原始file对象，所以是可以正常转换的。

而上传成功后传输的file对象很大程度是iview框架进行了处理之后的信息。

 Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.翻译:
 未能对“URL”执行“createObjectURL”：找不到与提供的签名匹配的函数。

 

 

最后, 我十分的建议大家. 不要直接使用action地址上传。