Vue+element_ui上传文件,并传递额外参数(自动上传)使用实例

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue+element_ui上传文件,并传递额外参数(自动上传)使用实例相关的知识，希望对你有一定的参考价值。

参考技术A  <el-upload    action="http://localhost:57937/api/Attchment/UploadAttachment"

    :on-success="handleAvatarSuccess"  list-type="picture-card"

   :http-request="Change" :on-preview="handlePictureCardPreview"

   :on-remove="handleRemove">

  <i class="el-icon-plus"></i>

   </el-upload>

//图片上传带参数

Change (param, type)

                console.log(param, type);

                let formData = new FormData() 

                formData.append('files', param.file)

                 formData.append("path", 'repair')// 额外参数

         this.$http.post('/Attchment/UploadAttachment', formData).then(res =>

                 console.log(res);

                ); 

            ,

API接收.net:

string typepath = HttpContext.Current.Request["path"]; 

Blueimp jQuery 文件上传，传递额外的表单数据

【中文标题】Blueimp jQuery 文件上传，传递额外的表单数据【英文标题】：Blueimp jQuery file upload, passing extra form data 【发布时间】：2011-11-19 12:41:51 【问题描述】：

我可以帮忙...尽可能清晰和简单。我会尽量具体一点。

好的...我想用这个实现的是人们可以上传照片，并为每张照片选择额外的选项（通过下拉菜单）并添加额外的细节（通过文本输入框）。这些额外的表单字段将与上传的文件数组一起在数组中传递。每个文件名及其相应的菜单选择和详细信息最终将与上传的照片一起存储在动态生成的XML或文本文件中。

我知道之前在 github 上出现过类似的问题，并且我已经看到了诸如此类的解决方案（https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional- Form-Data），但我使用的是最新版本的插件，在我的任何文件中都找不到与该插件等效的代码。

到目前为止我已经添加了：

<td><b>Package:</b> 
<select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select>
</td>
<td>
<input type="text" name="notes[]">
</td>

到 index.html 文件中（在“删除”按钮代码之后），并将结束表单标记移动到模板上传脚本之后以包含这些字段。我知道这没什么进步。

这里是 index.html 的大部分内容

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" id="theme">
<link rel="stylesheet" href="../jquery.fileupload-ui.css">
<link rel="stylesheet" href="style.css">
<h2>File Upload</h2>
<div id="fileupload">
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
            <span>Add files...</span>
            <input type="file" name="files[]" multiple>
        </label>
        <button type="submit" class="start">Start upload</button>
        <button type="reset" class="cancel">Cancel upload</button>
        <button type="button" class="delete">Delete files</button>
    </div>
//</form> originally here, moved below
<div class="fileupload-content">
    <table class="files"></table>
    <div class="fileupload-progressbar"></div>
</div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
<tr class="template-uploadif error ui-state-error/if">
    <td class="preview"></td>
    <td class="name">$name</td>
    <td class="size">$sizef</td>
    if error
        <td class="error" colspan="2">Error:
            if error === 'maxFileSize'File is too big
            else error === 'minFileSize'File is too small
            else error === 'acceptFileTypes'Filetype not allowed
            else error === 'maxNumberOfFiles'Max number of files exceeded
            else$error
            /if
        </td>
    else
        <td class="progress"><div></div></td>
        <td class="start"><button>Start</button></td>
    /if
    <td class="cancel"><button>Cancel</button></td>
</tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
<tr class="template-downloadif error ui-state-error/if">
    if error
        <td></td>
        <td class="name">$name</td>
        <td class="size">$sizef</td>
        <td class="error" colspan="2">Error:
            if error === 1File exceeds upload_max_filesize (php.ini directive)
            else error === 2File exceeds MAX_FILE_SIZE (HTML form directive)
            else error === 3File was only partially uploaded
            else error === 4No File was uploaded
            else error === 5Missing a temporary folder
            else error === 6Failed to write file to disk
            else error === 7File upload stopped by extension
            else error === 'maxFileSize'File is too big
            else error === 'minFileSize'File is too small
            else error === 'acceptFileTypes'Filetype not allowed
            else error === 'maxNumberOfFiles'Max number of files exceeded
            else error === 'uploadedBytes'Uploaded bytes exceed file size
            else error === 'emptyResult'Empty file upload result
            else$error
            /if
        </td>
    else
        <td class="preview">
            if thumbnail_url
                <a href="$url" target="_blank"><img src="$thumbnail_url"></a>
            /if
        </td>
        <td class="name">
            <a href="$url"if thumbnail_url target="_blank"/if>$name</a>
        </td>
        <td class="size">$sizef</td>
        <td colspan="2"></td>
    /if
    <td class="delete">
        <button data-type="$delete_type" data-url="$delete_url">Delete</button>
    </td>
<td><b>Package:</b> 
<select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select>
</td>
<td>
<input type="text" name="notes[]">
</td>
</tr>
</script>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="../jquery.iframe-transport.js"></script>
<script src="../jquery.fileupload.js"></script>
<script src="../jquery.fileupload-ui.js"></script>
<script src="application.js"></script>

我对 upload.php 不太了解，文件 [] 数组在哪里解析文件名等，我不确定在哪里接收包 [] 和notes[] 数组，遍历它们，以及如何将所有这些信息放入文本/XML 文件中。

有一点耐心和一些使用这个插件/这些问题的经验的人可以引导我完成接下来的步骤吗？非常感谢您的帮助。

【问题讨论】：

【参考方案1】：

我还需要传递一个额外的参数，发现formData option可以用来编程设置额外的表单数据。

$('#fileupload').fileupload(
    formData: 
                    param1: 'test'
                    ,param2: "value2"
                    ,param3: "yasseshaikh"
              
);

来源：Adding additional form data programmatically

【讨论】：

请注意：如果上传的文件大于post_max_size 或upload_max_filesize（在php.ini 中），您的表单数据可能会丢失。您还应该始终添加 maxChunkSize-参数（例如 maxChunkSize:10*1024*1024），以便将大文件拆分为包含 formData 的 10MB 小块。【参考方案2】：

要传递额外的表单数据，您可以执行以下操作：

    $('[name=files\\[\\]]').fileupload(
        //...your initialization of the file uploader here
    ).bind('fileuploadsubmit', function (e, data) 
        data.formData = 
            'package': $('[name=package\\[\\]]').val(),
            'notes': $('[name=notes\\[\\]]').val()
        ;
    );

在 PHP 端，您可以在 $_POST 数组中查找已提交的“包”和 笔记的数据。

当要提交的数据不是数组数据（例如提交多个值的复选框）时，我会避免在表单元素名称中使用“[]”。

【讨论】：

我遇到了这个问题。但是你帮我整理了谢谢@jasonjonesutah【参考方案3】：

我发现此资源有助于通过上传的文件传递额外的表单数据：

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data

对不起，我没有时间写一个更详细的答案。

【讨论】：

有人问（在现在已删除的评论中）为什么我用 OP 包含在其原始问题中的资源的链接来回答这个问题。鉴于这是很久以前回答的问题，我只能推测我在最初回答时忽略了这一点。我将把我的答案留在这里，因为它似乎对一些给予支持的人很有价值（可能是因为它使该资源更加可见）。【参考方案4】：

在 upload.php 中 - 要查找您正在寻找的参数，请尝试检查全局变量 $_REQUEST、$_GET 或 $_POST http://php.net/manual/en/reserved.variables.request.php

例如，如果您向upload.php 发送'package[]' 参数，您可以使用$_REQUEST['package[]'] 在upload.php 中访问它

希望这会有所帮助。

【讨论】：

以上是关于Vue+element_ui上传文件,并传递额外参数(自动上传)使用实例的主要内容，如果未能解决你的问题，请参考以下文章

Vue开发实例（03）之Vue项目引入element_ui

Vue+element_ui生成Ubuntu自定义壁纸幻灯片的核心xml文本

Vue+element_ui生成Ubuntu自定义壁纸幻灯片的核心xml文本

element_ui的datePicker修改样式

VUE Element 上传插件引入表格on-success传参问题

如何在Vue 2中处理文件上传