• 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 + ' 上传失败。'
                });
            },
  • 相关阅读:
    浅谈服务端渲染
    vuex数据持久化
    vuex中的命名空间
    如果在项目中使用阿里图标库
    vue中的插槽
    webpack相关以及搭建react环境
    数组的reduce方法
    再也不用等后端的接口就可以调试了Json-server
    react中如何使用swiper
    解决vue中组件库vant等ui组件库的移动端适配问题
  • 原文地址:https://www.cnblogs.com/mafeng/p/7715523.html
Copyright © 2020-2023  润新知