iView Uploadコンポーネントを使ってマニュアルで画像をアップロードすることができます.

過去には、ブラウザは、画像を含むローカルのファイルを読み込むことができませんでした.したがって、私たちは一つの画像をプレビューする必要があります.まずサービスに転送してから、サービス側でurlアドレスを返して、プレビュー画像の機能を達成します.現在、標準が改善されつつあるにつれて、JavaScriptのAPIはますます多くなりました.直接にローカルファイルを読み込むことによって、私たちが見たいテキストや写真を読み込むことができます.
Uploadコンポーネントの参考文献:https://www.iviewui.com/components/upload
ドキュメントからの参照コード:

    export default {
        data () {
            return {
                defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
                imgName: '',
                visible: false,
                uploadList: []
            }
        },
        methods: {
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                //   upload       
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                //          ，       url
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '       ',
                    desc: '   ' + file.name + '      ，    jpg   png      。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '        ',
                    desc: '   ' + file.name + '   ，     2M。'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '       5    。'
                    });
                }
                return check;
            }
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        }
    }

自分で手動アップロードを実現します.

export default {
  methods: {
    data(){
        return {
            uploadList: []
        }
    },
    handleBeforeUpload(file) {
        //      FileReader   
        let reader = new FileReader()
        // readAsDataURL          Blob   File    
        //       ，readyState    DONE，loadend    ，   result       ：URL（  base64              ）
        //        URL      
        reader.readAsDataURL(file)

        const _this = this
        reader.onloadend = function (e) {
            file.url = reader.result
            _this.uploadList.push(file)
        }
    },
    handleRemove(file) {
        this.uploadList.splice(this.uploadList.indexOf(file), 1)
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '       ',
        desc: '   ' + file.name + '      ，    jpg   png      。'
      })
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '        ',
        desc: '   ' + file.name + '   ，     2M。'
      })
    }
  }
}