官方网站:http://www.ncmem.com/index.aspx

产品首页:http://www.ncmem.com/webapp/up6/index.aspx

开发文档:http://www.ncmem.com/doc/view.aspx?id=653253c5b16243f4835469e82c2c1146

控件下载:http://www.ncmem.com/webapp/up6/pack.aspx

示例下载:http://www.ncmem.com/webapp/up6/versions.aspx

联系信箱:1085617561@qq.com

联系QQ:1085617561
产品交流群:泽优Web大文件上传控件

扫码加群:
image

  asp.net:https://gitee.com/xproer/up6-asp-net/tree/6.5.38/

 jsp-eclipse:https://gitee.com/xproer/up6-jsp-eclipse/tree/6.5.38/

 jsp-myeclipse:https://gitee.com/xproer/up6-jsp-myeclipse/tree/6.5.38/

 jsp-springboot:https://gitee.com/xproer/up6-jsp-springboot/tree/6.5.38/

 php:https://gitee.com/xproer/up6-php/tree/6.5.38/

 vue-cli:https://gitee.com/xproer/up6-vue-cli

以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载。

 

准备文件上传的API

 

#region 文件上传  可以带参数

[HttpPost(“upload”)]

public JsonResult uploadProject(IFormFile file, string userId)

{

if (file != null)

{

var fileDir = “D:\\aaa”;

if (!Directory.Exists(fileDir))

{

Directory.CreateDirectory(fileDir);

}

//文件名称

string projectFileName = file.FileName;

 

//上传的文件的路径

string filePath = fileDir + $@”\{projectFileName}”;

using (FileStream fs = System.IO.File.Create(filePath))

{

file.CopyTo(fs);

fs.Flush();

}

return Json(“ok”);

}else{

return Json(“no”);

}

}

#endregion

前端vue上传组件  ( 利用Form表单上传 )

 

<template>

<div>

<form>

<input type=”text” value=”” v-model=”projectName” placeholder=”请输入项目名称”>

<input type=”file” v-on:change=”getFile($event)”>

<button v-on:click=”submitForm($event)”>上传</button>

</form>

</div>

</template>

 

<script>

///这个组件是用于上传bdls文件的组件

export default {

data() {

return {

uploadURL: “/Home/Upload”,

projectName: “”,

file: “”

};

},

methods: {

getFile(event) {

this.file = event.target.files[0];

console.log(this.file);

},

submitForm(event) {

event.preventDefault();

let formData = new FormData();

formData.append(“file”, this.file);

 

let config = {

headers: {

“Content-Type”: “multipart/form-data”

}

};

 

this.$http

.post(this.uploadURL, formData, config)

.then(function(response) {

if (response.status === 200) {

console.log(response.data);

}

});

}

}

};

</script>

 

<style lang=”scss” scoped>

</style>

用 element-ui 的 Upload组件上传文件

 

http://element-cn.eleme.io/#/zh-CN/component/upload

 

<template>

<div>

<el-upload

class=”upload-css”

:file-list=”uploadFiles”

ref=”upload”

:on-success=”upLoadSuccess”

:on-error=”upLoadError”

:action=”uploadURL”

:auto-upload=”false”>

<el-button slot=”trigger” size=”small” type=”primary”>选取文件</el-button>

<el-button style=”margin-left: 10px;” size=”small” type=”success” @click=”submitUpload”>上传到服务器</el-button>

</el-upload>

</div>

</template>

 

<script>

import Vue from “vue”;

import { Upload, Button } from “element-ui”;

Vue.use(Upload);

Vue.use(Button);

 

export default {

props: [],

data() {

return {

projectName: “”,

//uploadURL: “/project/upload?a=1”,

uploadFiles: [] //上传的文件列表

};

},

computed: {

//文件的上传路径

//附带用户id和项目名称

uploadURL: function() {

//var userId = this.$store.state.userId;

return “/project/upload?userId=” + 1;

}

},

methods: {

//文件上传

submitUpload() {

this.$refs.upload.submit();

},

//文件上传成功时的钩子

upLoadSuccess(response, file, fileList) {

if (response == “ok”) {

console.log(response + “已上传” + file);

console.log(“项目添加成功”);

} else {

console.log(“项目添加失败”);

}

},

//文件上传失败时的钩子

upLoadError(response, file, fileList) {

console.log(“项目添加失败”);

}

}

};

</script>

 

<style lang=”scss” scoped>

</style>

文件下载

普通的文件下载方式是访问一个后台文件流地址,直接生成对应的文件,下载即可,地址栏中也可携带一些控制参数,但是无法通过header传递参数。

 

两种文件下载方式,一种是,直接返回file文件,利用浏览器的下载功能。但是这种没有发现可以在发送请求的时候携带token;另一种是利用 Axios 发送下载文件的请求,可以设置header头,可以携带token ,但是response-type是blob类型的。

 

第一种:

后端API:

 

public FileResult downloadRequest()

{

//var addrUrl = webRootPath + “/upload/thumb.jpg”;

var addrUrl = “D:/aaa/thumb.jpg”;

 

var stream = System.IO.File.OpenRead(addrUrl);

 

string fileExt = Path.GetExtension(“thumb.jpg”);

 

//获取文件的ContentType

 

var provider = new FileExtensionContentTypeProvider();

 

var memi = provider.Mappings[fileExt];

 

return File(stream, memi, Path.GetFileName(addrUrl));

}

前端利用浏览器的功能url直接返回文件

 

下载文件…

 

downloadRequest() {

let url = “Home/downloadRequest”; //可以在路径中传递参数

window.location.href = url;

},

第二种

后端api ,两个api的返回类型不同,asp.net core 文件下载常用的有FileResult 、FileContentResult 、 FileStreamResult。

 

public FileContentResult downloadRequest1()

{

//string webRootPath = _hostingEnvironment.WebRootPath;

//var addrUrl = webRootPath + “/upload/thumb.jpg”;

var addrUrl = “D:/aaa/wyy.exe”;

 

/*var stream = System.IO.File.OpenRead(addrUrl);

 

string fileExt = Path.GetExtension(“thumb.jpg”);

 

//获取文件的ContentType

 

var provider = new FileExtensionContentTypeProvider();

 

var memi = provider.Mappings[fileExt];

 

return File(stream, memi, Path.GetFileName(addrUrl));*/

 

//return stream;

byte[] fileBytes = System.IO.File.ReadAllBytes(addrUrl);

string fileName = “wyy.exe”;

return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName); //关键语句

}

前端页面

 

blob(用来存储二进制大文件)

 

<el-button type=”primary” v-on:click=”downloadRequest1″>下载文件11</el-button>

downloadRequest1() {

axios({

// 用axios发送post请求

method: “post”,

url: “Home/downloadRequest1”, // 请求地址 ,也可以传递参数

headers: {

//可以自定义header

gggg: “gggggggggggggggggggggggggggggggggggggggggggggggggggg”  //可以携带token

},

responseType: “blob” // 表明返回服务器返回的数据类型

}).then(res => {

// 处理返回的文件流

//主要是将返回的data数据通过blob保存成文件

var content = res.data;

var blob = new Blob([content]);

var fileName = “wyy.exe”; //要保存的文件名称

if (“download” in document.createElement(“a”)) {

// 非IE下载

var elink = document.createElement(“a”);

elink.download = fileName;

elink.style.display = “none”;

elink.href = URL.createObjectURL(blob);

document.body.appendChild(elink);

elink.click();

URL.revokeObjectURL(elink.href); // 释放URL 对象

document.body.removeChild(elink);

} else {

// IE10+下载

navigator.msSaveBlob(blob, fileName);

}

console.log(res);

});

}

第三种

就是用用up6控件,此控件支持mac、windos、Linux,

欢迎入群一起讨论:374992201