zoukankan      html  css  js  c++  java
  • VUE -- 用组件上传文件和用xmlrequest上传

    xmlrequest:

    sendForm(str, types) {
                    var form = this.$refs.ipas_form;
                    var oOutput = document.querySelector("div"),
                        oData = new FormData((document.forms.namedItem(str)));
    
                    oData.append("username", "This is some extra data");
    
                    var oReq = new XMLHttpRequest();
                    //oReq.open("POST", "https://sddeznsm.com/file?type="+ types +"&app_name="+$("#app_name").val(), true);
                    oReq.open("POST", "http://localhost:9000/file?type=" + types + "&app_name=" + form.text, true);
                    oReq.onload = function (oEvent) {
                        if (oReq.status == 200) {
                            alert("上传成功");
                            // oOutput.innerHTML = "Uploaded!";
                        } else {
                            alert("上传失败");
                            // oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br />";
                        }
                    };
    
                    oReq.send(oData);
                }

    组件(iview-admin): 

    <div style="display: block; 100%;text-align: center;">
                        <Upload
                                action="http://localhost:9000/file?type=ipas&app_name=jinan"
                                :on-format-error="handleFormatError"
                                :max-size="204800"
                                :before-upload="handleBeforeUpload"
                                :on-progress="handleProgress"
                                :on-success="handleSuccess"
                                :on-error="handleError"
                        >
                            <span>请选择文件&nbsp;&nbsp;</span>
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
                        </Upload>
                    </div>

    监听上传过程:

    methods: {
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确,请选择图片文件。'
                });
            },
            handleBeforeUpload (file) {
                this.$Notice.warning({
                    title: '文件准备上传',
                    desc: '文件 ' + file.name + ' 准备上传。'
                });
            },
            handleProgress (event, file) {
                this.$Notice.info({
                    title: '文件正在上传',
                    desc: '文件 ' + file.name + ' 正在上传。'
                });
            },
            handleSuccess (evnet, file) {
                this.$Notice.success({
                    title: '文件上传成功',
                    desc: '文件 ' + file.name + ' 上传成功。'
                });
            },
            handleError (event, file) {
                this.$Notice.error({
                    title: '文件上传失败',
                    desc: '文件 ' + file.name + ' 上传失败。'
                });
            },
  • 相关阅读:
    JAVA 框架
    npm安装超时,使用淘宝镜像
    使用vite搭建Vue3项目
    前端常用框架
    vue发布自己的组件库-vue3
    vue2升级vue3-基础教程
    Navicat Premium 15破解失败解决方案
    大屏
    vue使用高德地图
    vue生命周期及钩子函数
  • 原文地址:https://www.cnblogs.com/mafeng/p/7715523.html
Copyright © 2011-2022 走看看