如何使用AspUpload组件上传文件

Posted 2023-04-13

你好，试试以下的方法：一、摘要Asp组件有内置的、服务器安装时附带的，更多的是第三方提供的，今天来学习文件上传的其中一个组件aspupload组件使用方法。
二、aspupload组件的下载、安装或注册 1、asp组件的下载、安装
（1）可以从网上下载。
（2）直接双击后进行安装。
AspUpload组件下载2、asp上传组件的功能
a.限制上载文件的大小
b.设置用户的权限
c.修改文件属性
d.同时上载多个文件
e.能够将文件保存到数据库中
f.支持文件删除，自动生成与服务器上文件不同名的文件
g.拥有管理权限的用户甚至可以使用该控件进行远程注册
三、aspupload组件的简单应用
1、实例一（1.asp）：通过代码实现三个文件的上传功能。
如下图所示：

（1）静态页面：1个表单，三个文件域，一个按钮，其中表单form的动作如下。 （2）其中客户端文件要注意几点：
* 文件上载提交表单(Form)的enctype必须指定为“multipart/form-data”
* 语句表示上载文件域，用户可以在该域中输入或选定文件。
* 传递一个参数act（名称可自己取），其值可以自己随便定，目的是触发上传事件。
（3）动态代码如下：
2、实例二（2.asp）：修改程序1.asp，要求在上传文件后显示上传文件的文件名及大小。
增加如下代码： response.write("文件1是：
")response.write(upload.files(1).path)
response.write("文件2是：
")response.write(upload.files(2).path)
response.write("文件3是：

")
response.write(upload.files(3).path)

说明：
upload.files方法用来获取文件的相关属性，path是文件的路径，size是文件的大小。
3、实例三（3.asp）：修改程序2.asp，要求上传的三个文件大小不能超过5K，如果上传的文件已经存在则要求不覆盖文件。
在上传之前增加如下代码：
upload.setmaxsize 5120,false
upload.overwritefiles=fals说明：
（1）upload.setmaxsize 5120,false　其功能为设置文件最大为5120字节，false参数说明当文件超过5120字节时则删除超过部分，true参数说明当文件超过5120字节时则出错。
（2）upload.overwritefiles=false，其功能表示文件不进行覆盖，如果上传同样文件名的文件，上传后文件名自动会在后面添加一个数字。
四、自学第二个上传文件的组件
1、Lyfupload组件的下载
2、学习此组件的安装或注册
3、通过课本例子进行文件的上传
五、问题
1、传到学校里服务器172.18.0.7运行时出现以下错误，Server.CreateObject 失败
分析原因：学校服务器不支持aspupload上传组件
2、如果服务器不支持aspupload等上传组件，请大家使用无组件上传功能（编写代码），见书本上P322，此类代码比较复杂，同学们能够拿来使用，无须自己编写。
3、大家在网上申请个人空间时要看清服务器支持哪些组件，这样有利于编写代码。 参考技术A 一、摘要
　　Asp组件有内置的、服务器安装时附带的，更多的是第三方提供的，今天来学习文件上传的其中一个组件aspupload组件使用方法。
二、aspupload组件的下载、安装或注册
1、asp组件的下载、安装
（1）可以从网上下载。
（2）直接双击后进行安装。
AspUpload组件下载
2、asp上传组件的功能
a.限制上载文件的大小
b.设置用户的权限
c.修改文件属性
d.同时上载多个文件
e.能够将文件保存到数据库中
f.支持文件删除，自动生成与服务器上文件不同名的文件
g.拥有管理权限的用户甚至可以使用该控件进行远程注册
三、aspupload组件的简单应用
1、实例一（1.asp）：通过代码实现三个文件的上传功能。
如下图所示：

（1）静态页面：1个表单，三个文件域，一个按钮，其中表单form的动作如下。

（2）其中客户端文件要注意几点：
* 文件上载提交表单(Form)的enctype必须指定为“multipart/form-data”
* 语句表示上载文件域，用户可以在该域中输入或选定文件。
* 传递一个参数act（名称可自己取），其值可以自己随便定，目的是触发上传事件。
（3）动态代码如下：

2、实例二（2.asp）：修改程序1.asp，要求在上传文件后显示上传文件的文件名及大小。
如下图所示：

增加如下代码：
response.write("
文件1是：
")
response.write(upload.files(1).path)
response.write("
文件2是：
")
response.write(upload.files(2).path)
response.write("
文件3是：

")
response.write(upload.files(3).path)

说明：
upload.files方法用来获取文件的相关属性，path是文件的路径，size是文件的大小。
3、实例三（3.asp）：修改程序2.asp，要求上传的三个文件大小不能超过5K，如果上传的文件已经存在则要求不覆盖文件。
在上传之前增加如下代码：
upload.setmaxsize 5120,false
upload.overwritefiles=false
说明：
（1）upload.setmaxsize 5120,false　其功能为设置文件最大为5120字节，false参数说明当文件超过5120字节时则删除超过部分，true参数说明当文件超过5120字节时则出错。
（2）upload.overwritefiles=false，其功能表示文件不进行覆盖，如果上传同样文件名的文件，上传后文件名自动会在后面添加一个数字。
四、自学第二个上传文件的组件
1、Lyfupload组件的下载
2、学习此组件的安装或注册
3、通过课本例子进行文件的上传
五、问题
1、传到学校里服务器172.18.0.7运行时出现以下错误，Server.CreateObject 失败
分析原因：学校服务器不支持aspupload上传组件
2、如果服务器不支持aspupload等上传组件，请大家使用无组件上传功能（编写代码），见书本上P322，此类代码比较复杂，同学们能够拿来使用，无须自己编写。
3、大家在网上申请个人空间时要看清服务器支持哪些组件，这样有利于编写代码。

如何在 vue 组件上使用 axios 传递上传的文件和传递参数？

【中文标题】如何在 vue 组件上使用 axios 传递上传的文件和传递参数？

【英文标题】：How can I pass file uploaded and pass parameter with axios on vue component?

【发布时间】：2018-08-04 21:11:14

【问题描述】：

我的 vue 组件上传文件图片如下：

<template>
    <section>
        <ul class="media-list">
            ...
        </ul>
    </section>
</template>

<script>
    export default 
        ...
        props: ['productId'],
        methods: 
            ...
            onFileChange(e, index) 
                let files = e.target.files,
                let formData = new FormData()
                formData.append('file', files[0])
                axios.post(window.App.baseUrl+'/admin/product/upload-image',
                formData,
                
                    headers: 
                        'Content-Type': 'multipart/form-data'
                    
                
                ).then(function()
                    console.log('SUCCESS!!')
                )
                .catch(function()
                    console.log('FAILURE!!')
                );
            
        
    
</script>

所以如果用户上传文件图片会调用onFileChange方法

我的路线是这样的：

Route::prefix('admin')->group(function()
    Route::prefix('product')->group(function()
        Route::post('upload-image', 'Admin\ProductController@uploadImage')->name('admin.product.upload-image');
    );
);

我的控制器是这样的：

public function uploadImage(Request $request)

    echo '<pre>';print_r($request->all());echo '</pre>';die();

代码有效。我成功将文件上传到控制器中

但在这里我也想传递另一个参数。我要传递参数productId

我尝试像这样更改代码 axios：

...
axios.post(window.App.baseUrl+'/admin/product/upload-image',
product_id: this.productId, formData
...

它不起作用。结果为空

我该如何解决这个问题？

【参考方案1】：

将 product_id 放入 formData。

let formData = new FormData();
formData.append('file', files[0]);
formData.append('product_id', this.productId);

axios.post(window.App.baseUrl+'/admin/product/upload-image', formData)
  .then(function()
    console.log('SUCCESS!!')
  )
  .catch(function()
    console.log('FAILURE!!')
  );