element-ui文件上传使用

<el-upload

ref="uploadRef"//给上传文件绑脊消没定一个ref必要时好清空上传文件数组

style="margin-left:10px"

:limit="limitNum" //限制上传文件个数 这里我一个对象来代替

action="" // 上传地桥清址

multiple

:auto-upload="false" //自动上传文件

:show-file-list="false" //是否显示上传信息列表

class="upload-demo"// 关闭前的验证

:before-upload="beforeUploadFile"//上传前的验证

:on-exceed="exceedFile" //超出上传个数的验证

:on-change="fileChange" //上传文件发生改变时触发change事件

>

<el-button slot="trigger" type="primary">导入文件</el-button>

</el-upload>

——-----------------------------------------------------------------------------------------

fileChange(file, fileList) {

this.beforeUploadFile(file)

if (this.beforeUploadFile(file)) {

this. refs.uploadRef.clearFiles() //清空上传列表里面的数据

}

}

exceedFile(files, fileList) {

this. {this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)

}

beforeUploadFile(file) {

const isLt5M = file.size / 1024 / 1024 <10

if (this.allowType.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) === -1) {

this. {this.allowTypeTips} 格式!`

})

return false

}

if (!isLt5M) {

this.$message.error({ title: '系统提示', message: '上传文件大樱纳小不能超过 10MB!' })

return false

} else {

return true

}

}

uploadFile() {

if (this.fileList.length === 0) {

this. message.success({ title: '系统提示', message: '上传成功' })

this.fileList = []

} else {

this.$message.error({ title: '系统提示', message: '上传失败' })

}

})

}

},

引入ajaxfileupload.js

jQuery.extend({

    createUploadIframe: function(id, uri)

    {

        //create frame

        var frameId = 'jUploadFrame' + id

        if(window.ActiveXObject) {

            var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />')

            if(typeof uri== 'boolean'){

                io.src = 'javascript:false'

            }

            else if(typeof uri== 'string'){

                io.src = uri

            }

        }

        else {

            var io = document.createElement('iframe')

            io.id = frameId

            io.name = frameId

        }

        io.style.position = 'absolute'

        io.style.top = '-1000px'

        io.style.left = '-1000px'

        document.body.appendChild(io)

        return io

    },

    createUploadForm: function(id, fileElementId)

    {

        //create form

        var formId = 'jUploadForm' + id

        var fileId = 'jUploadFile' + id

        铅团var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>')

        var oldElement = $('#' + fileElementId)

        var newElement = $(oldElement).clone()

        槐举橘$(oldElement).attr('id', fileId)

 答码       $(oldElement).before(newElement)

        $(oldElement).appendTo(form)

        //set attributes

        $(form).css('position', 'absolute')

        $(form).css('top', '-1200px')

        $(form).css('left', '-1200px')

        $(form).appendTo('body')

        return form

    },

    addOtherRequestsToForm: function(form,data)

    {

        // add extra parameter

        var originalElement = $('<input type="hidden" name="" value="">')

        for (var key in data) {

            name = key

            value = data[key]

            var cloneElement = originalElement.clone()

            cloneElement.attr({'name':name,'value':value})

            $(cloneElement).appendTo(form)

        }

        return form

    },

    ajaxFileUpload: function(s) {

        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout

        s = jQuery.extend({}, jQuery.ajaxSettings, s)

        var id = new Date().getTime()

        var form = jQuery.createUploadForm(id, s.fileElementId)

        if ( s.data ) form = jQuery.addOtherRequestsToForm(form,s.data)

        var io = jQuery.createUploadIframe(id, s.secureuri)

        var frameId = 'jUploadFrame' + id

        var formId = 'jUploadForm' + id

        // Watch for a new set of requests

        if ( s.global && ! jQuery.active++ )

        {

            jQuery.event.trigger( "ajaxStart" )

        }

        var requestDone = false

        // Create the request object

        var xml = {}

        if ( s.global )

            jQuery.event.trigger("ajaxSend", [xml, s])

        // Wait for a response to come back

        var uploadCallback = function(isTimeout)

        {

            var io = document.getElementById(frameId)

            try

            {

                if(io.contentWindow)

                {

                    xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null

                    xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document

                }else if(io.contentDocument)

                {

                    xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null

                    xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document

                }

            }catch(e)

            {

                jQuery.handleError(s, xml, null, e)

            }

            if ( xml || isTimeout == "timeout")

            {

                requestDone = true

                var status

                try {

                    status = isTimeout != "timeout" ? "success" : "error"

                    // Make sure that the request was successful or notmodified

                    if ( status != "error" )

                    {

                        // process the data (runs the xml through httpData regardless of callback)

                        var data = jQuery.uploadHttpData( xml, s.dataType )

                        // If a local callback was specified, fire it and pass it the data

                        if ( s.success )

                            s.success( data, status )

                        // Fire the global callback

                        if( s.global )

                            jQuery.event.trigger( "ajaxSuccess", [xml, s] )

                    } else

                        jQuery.handleError(s, xml, status)

                } catch(e)

                {

                    status = "error"

                    jQuery.handleError(s, xml, status, e)

                }

                // The request was completed

                if( s.global )

                    jQuery.event.trigger( "ajaxComplete", [xml, s] )

                // Handle the global AJAX counter

                if ( s.global && ! --jQuery.active )

                    jQuery.event.trigger( "ajaxStop" )

                // Process result

                if ( s.complete )

                    s.complete(xml, status)

                jQuery(io).unbind()

                setTimeout(function()

                { try

                    {

                        $(io).remove()

                        $(form).remove()

                    } catch(e)

                    {

                        jQuery.handleError(s, xml, null, e)

                    }

                }, 100)

                xml = null

            }

        }

        // Timeout checker

        if ( s.timeout > 0 )

        {

            setTimeout(function(){

                // Check to see if the request is still happening

                if( !requestDone ) uploadCallback( "timeout" )

            }, s.timeout)

        }

        try

        {

            // var io = $('#' + frameId)

            var form = $('#' + formId)

            $(form).attr('action', s.url)

            $(form).attr('method', 'POST')

            $(form).attr('target', frameId)

            if(form.encoding)

            {

                form.encoding = 'multipart/form-data'

            }

            else

            {

                form.enctype = 'multipart/form-data'

            }

            $(form).submit()

        } catch(e)

        {

            jQuery.handleError(s, xml, null, e)

        }

        if(window.attachEvent){

            document.getElementById(frameId).attachEvent('onload', uploadCallback)

        }

        else{

            document.getElementById(frameId).addEventListener('load', uploadCallback, false)

        }

        return {abort: function () {}}

    },

    uploadHttpData: function( r, type ) {

        var data = !type

        data = type == "xml" || data ? r.responseXML : r.responseText

        // If the type is "script", eval it in global context

        if ( type == "script" )

            jQuery.globalEval( data )

        // Get the JavaScript object, if JSON is used.

        if ( type == "json" )

        {

            // If you add mimetype in your response,

            // you have to delete the '<pre></pre>' tag.

            // The pre tag in Chrome has attribute, so have to use regex to remove

            var data = r.responseText

            var rx = new RegExp("<pre.*?>(.*?)</pre>","i")

            var am = rx.exec(data)

            //this is the desired data extracted

            var data = (am) ? am[1] : ""    //the only submatch or empty

            eval( "data = " + data )

        }

        // evaluate scripts within html

        if ( type == "html" )

            jQuery("<div>").html(data).evalScripts()

        //alert($('param', data).each(function(){alert($(this).attr('value'))}))

        return data

    }

})

2.引入上传文件所需的jar

3.配置servlet.xml(不是web.xml)

4.jsp上传框

5.ajax传文件到后台

6.后台接收文件

7.获取之后怎么处理自己看着办咯，我只能帮到这里了

效果展示

使用组件面板中的画廊布局，能够支持显示多张图片，同时结合文件上传组件并春搏，将文件中的图片，上传并显示到界面。

触发器配置

注意：在绝祥检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中文件上传组件

点击检查面板中森迹的触发器

创建设置值触发器

自身值即选择文件上传组件的显示值

替换值选择画廊布局

创建一个触发时机是在……时的触发器

这样就可以在小程序里实现多图上传显示了。

---