❶ 如何设置upload文件夹，使得这个文件夹可以用来上传文件，却不能从localhost/upload访问到文件列表
首先 要保证你的磁盘的格式是 ntfs格式的
你可以 点 文件夹上的-- 工具--文件夹选项-- 查看--使用简单文件共享前面的钩去掉。
然后 在 iis指向的文件夹上 点右键 属性--安全---可以设置不同用户的 读写权限。。。
另外上传文件 你可能需要装一些ftp服务，比如装个serv-u软件或者iis自带的也可以，用来指向这个设置了权限的目录。
NTFS权限
首先我们要知道:只要是存在NTFS磁盘分区上的文件夹或文件，无论是否被共享，都具有此权限。此权限对于使用FAT16/FAT32文件系统的文件与文件夹无效! NTFS权限有两大要素:一是标准访问权限;二是特别访问权限。前者将一些常用的系统权限选项比较笼统地组成6种"套餐型"的权限，即:完全控制、修改、读取和运行、列出文件夹目录、读取、写入。 在大多数的情况下，"标准权限"是可以满足管理需要的，但对于权限管理要求严格的环境，它往往就不能令管理员们满意了，如只想赋予某用户有建立文件夹的权限，却没有建立文件的权限;如只能删除当前目录中的文件，却不能删除当前目录中的子目录的权限等......这个时候，就可以让拥有所有权限选项的"特别权限"来大显身手了。也就是说，特别权限不再使用"套餐型"，而是使用可以允许用户进行"菜单型"的细节化权限管理选择了。 那么如何设置标准访问权限呢?以对一个在NTFS分区中的名为"guo"的文件夹进行设置标准访问权限为例，可以按照如下方法进行操作: 因为NTFS权限需要在资源属性页面的"安全"选项卡设置界面中进行，而Windows XP在安装后默认状态下是没有激活"安全"选项卡设置功能的， 所以需要首先启用系统中的"安全"选项卡。方法是:依次点击"开始"→"设置"→"控制面板 "，双击"文件夹选项"，在"查看"标签页设置界面上的"高级设置"选项列表中清除"使用简单文件共享(推荐)"选项前的复选框后点击"应用"按钮即可。 设置完毕后就可以右键点击"guo" 文件夹，在弹出的快捷菜单中选择"共享与安全"，在"guo属性"窗口中就可以看见"安全"选项卡的存在了。针对资源进行NTFS权限设置就是通过这个选项卡来实现的，此时应首先在"组或用户名称"列表中选择需要赋予权限的用户名组(这里选择"zhong"用户)，接着在下方的"zhong 的权限"列表中设置该用户可以拥有的权限即可。 下面简单解释一下六个权限选项的含义: ①完全控制(Full Control): 该权限允许用户对文件夹、子文件夹、文件进行全权控制，如修改资源的权限、获取资源的所有者、删除资源的权限等，拥有完全控制权限就等于拥有了其他所有的权限; ②修改(Modify): 该权限允许用户修改或删除资源，同时让用户拥有写入及读取和运行权限; ③读取和运行(Read & Execute): 该权限允许用户拥有读取和列出资源目录的权限，另外也允许用户在资源中进行移动和遍历，这使得用户能够直接访问子文件夹与文件，即使用户没有权限访问这个路径; ④列出文件夹目录(List Folder Contents): 该权限允许用户查看资源中的子文件夹与文件名称; ⑤读取(Read): 该权限允许用户查看该文件夹中的文件以及子文件夹，也允许查看该文件夹的属性、所有者和拥有的权限等; ⑥写入(Write): 该权限允许用户在该文件夹中创建新的文件和子文件夹，也可以改变文件夹的属性、查看文件夹的所有者和权限等。 如果在"组或用户名称"列表中没有所需的用户或组，那么就需要进行相应的添加操作了，方法如下:点击"添加"按钮后，在出现的"选择用户和组"对话框中，既可以直接在"输入对象名称来选择"文本区域中输入用户或组的名称(使用"计算机名\用户名"这种方式)，也可以点击"高级"按钮，在弹出的对话框中点击" 立即查找"按钮让系统列出当前系统中所有的用户组和用户名称列表。此时再双击选择所需用户或组将其加入即可。 如果想删除某个用户组或用户的话，只需在" 组或用户名称"列表中选中相应的用户或用户组后，点击下方的"删除"按钮即可。但实际上，这种删除并不能确保被删除的用户或用户组被拒绝访问某个资源，因此，如果希望拒绝某个用户或用户组访问某个资源，还要在"组或用户名称"列表中选择相应的用户名用户组后，为其选中下方的"拒绝"复选框即可。 那么如何设置特殊权限呢?假设现在需要对一个名为"guo"的目录赋"zhong"用户对其具有"读取"、"建立文件和目录"的权限，基于安全考虑，又决定取消该账户的"删除"权限。此时，如果使用"标准权限"的话，将无法完成要求，而使用特别权限则可以很轻松地完成设置。方法如下: 首先，右键点击"guo"目录，在右键快捷菜单中选择"共享与安全"项，随后在"安全"选项卡设置界面中选中"zhong"用户并点击下方的"高级"按钮，在弹出的对话框中点击清空"从父项继承那些可以应用到子对象的权限项目，包括那些在此明确定义的项目"项选中状态，这样可以断开当前权限设置与父级权限设置之前的继承关系。在随即弹出的" 安全"对话框中点击"复制"或"删除"按钮后(点击"复制"按钮可以首先复制继承的父级权限设置，然后再断开继承关系)，接着点击"应用"按钮确认设置，再选中"zhong"用户并点击"编辑"按钮，在弹出的"zhong的权限项目"对话框中请首先点击"全部清除"按钮，接着在"权限"列表中选择"遍历文件夹/运行文件"、"列出文件夹/读取数据"、"读取属性"、"创建文件/写入数据"、"创建文件夹/附加数据"、"读取权限"几项，最后点击"确定"按钮结束设置。 在经过上述设置后，"zhong"用户在对"guo"进行删除操作时，就会弹出提示框警告操作不能成功的提示了。显然，相对于标准访问权限设置 上的笼统，特别访问权限则可以实现更具体、全面、精确的权限设置。 为了大家更好地理解特殊权限列表中的权限含义，以便做出更精确的权限设置，下面简单解释一下其含义: ⑴遍历文件夹/运行文件(Traverse Folder/Execute File): 该权限允许用户在文件夹及其子文件夹之间移动(遍历)，即使这些文件夹本身没有访问权限。 注意:只有当在"组策略"中("计算机配置 "→"Windows设置"→"安全设置"→"本地策略"→"用户权利指派")将"跳过遍历检查"项授予了特定的用户或用户组，该项权限才能起作用。默认状态下，包"Administrators"、"Users"、"Everyone"等在内的组都可以使用该权限。 对于文件来说，拥了这项权限后，用户可以执行该程序文件。但是，如果仅为文件夹设置了这项权限的话，并不会让用户对其中的文件带上"执行"的权限; ⑵列出文件/读取数据(List Folder/Read Data): 该权限允许用户查看文件夹中的文件名称、子文件夹名称和查看文件中的数据; ⑶读取属性(Read Attributes): 该权限允许用户查看文件或文件夹的属性(如系统、只读、隐藏等属性); ⑷读取扩展属性(Read Extended Attributes): 该权限允许查看文件或文件夹的扩展属性，这些扩展属性通常由程序所定义，并可以被程序修改; ⑸创建文件/写入属性(Create Files/Write Data): 该权限允许用户在文件夹中创建新文件，也允许将数据写入现有文件并覆盖现有文件中的数据; ⑹创建文件夹/附加数据(Create Folder/Append Data): 该权限允许用户在文件夹中创建新文件夹或允许用户在现有文件的末尾添加数据，但不能对文件现有的数据进行覆盖、修改，也不能删除数据; ⑺写入属性(Write Attributes): 该权限允许用户改变文件或文件夹的属性; ⑻写入扩展属性(Write Extended Attributes): 该权限允许用户对文件或文件夹的扩展属性进行修改; ⑼删除子文件夹及文件(Delete Subfolders and Files): 该权限允许用户删除文件夹中的子文件夹或文件，即使在这些子文件夹和文件上没有设置删除权限; ⑽删除(Delete): 该权限允许用户删除当前文件夹和文件，如果用户在该文件或文件夹上没有删除权限，但是在其父级的文件夹上有删除子文件及文件夹权限，那么就仍然可以删除它; ⑾读取权限(Read Permissions): 该权限允许用户读取文件或文件夹的权限列表; ⑿更改权限(Change Permissions): 该权限允许用户改变文件或文件夹上的现有权限; ⒀取得所有权(Take Ownership): 该权限允许用户获取文件或文件夹的所有权，一旦获取了所有权，用户就可以对文件或文件夹进行全权控制。 这里需要单独说明一下"修改"权限与"写入 "权限的区别:如果仅仅对一个文件拥有修改权限，那么，不仅可以对该文件数据进行写入和附加，而且还可以创建新文件或删除现有文件。而如果仅仅对一个文件拥有写入权限，那么既可以对文件数据进行写入和附加，也可以创建新文件，但是不能删除文件。也就是说，有写入权限不等于具有删除权限，但拥有修改权限，就等同于拥有删除和写入权限。
❷ element UI使用Upload 上传视频，图片
elementUI中 upload 的地址： https://element.eleme.cn/#/zh-CN/component/upload 大家可以参考官方文档
这里我使用的是照片墙这个属性：list-type
```javascript
<el-upload
name="fileUpload"//上传文件的字段名字由后台提供
:data="folderName"//文件存储的文件夹
:action="这里的接口是后台提供的"
list-type="picture-card"
:on-success="successUpdata"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
data{
folderName: {folderName:'ycylManage'},
}
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible =true;
},
//上传成功的方法
successUpdata(file){
this.headImg = file.paths[0] //返回的是图片的路径
},
图片示例：
经过试验这个上传是可以上传视频的，所以推荐大家用这个，上传图片与上传图片是一样的
❸ vue el-upload上传文件方法 详细解答 action 和 http-request两种方式
包括action 和 http-request两种方式
上传成功回调方法 绑定 handleSuccess 方法
自定义上传相比action上传，扩展性更强，当项目里上传需求较多，且连接不同接口地址时，配置uploadheaders 配置很多显然不太优雅。
注意：自定义上传时，需要对该上传设置一下请求头 。 在拦截器里设置请求头
自定义上传的触发方式 ，点击确定时在 importUser 里执行，执行这句即是执行uploadFile方法
注意： formdata打印不出来，实际有值
❹ 谁会用vuejselupload标签怎么用如何获取上传文件的路径
<template lang="jade">
vue-file-upload(url='upload.do',
v-bind:files.sync = 'files',
v-bind:filters = "filters",
v-bind:on-complete-upload = 'completeUpload')
table
thead
tr
th name
th size
th progress
th status
th action
tbody
tr(v-for='file in files')
td(v-text='file.name')
td(v-text='file.size')
td(v-text='file.progress')
td(v-text='onStatus(file)')
td
button(type='button',@click="uploadItem(file)") 上传
button(type='button',@click="uploadAll") 上传所有文件
</template>
<script>
import VueFileUpload from 'vue-file-upload';
export default{
data(){
return{
files:[],
//文件过滤器，只能上传图片
filters:[
{
name:"imageFilter",
fn(file){
var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
}
]
}
},
methods:{
onStatus(file){
if(file.isSuccess){
return "上传成功";
}else if(file.isError){
return "上传失败";
}else if(file.isUploading){
return "正在上传";
}else{
return "待上传";
}
},
uploadItem(file){
//单个文件上传
file.upload();
},
uploadAll(){
//上传所有文件
this.$broadcast('DO_POST_FILE');
},
completeUpload(file,response,status,header){
console.log("finish upload;")
}
},
components:{
VueFileUpload
}
}
</script>
❺ el-upload
记录下项目过程中使用el-upload文件上传遇到的一些坑~
element官方是这样说明的：
其实不加on-change事件的话，before-upload直接返回false是可以停止上传的。
http-request绑定的上传方法必须添加return返回（不加return不好使），并且要返回一个promise对象，不然就会出现file一直是处于ready的状态，即使你是自己在file-list手动赋值success也是会自动变成ready的，而ready状态是不显示成成功状态的。（参考链接： https://zhuanlan.hu.com/p/457370276 ）
欢迎各位大佬指导讨论~
❻ el-upload上传文件后跳转页面后再返回已上传文件的回显
在使用<el-upload>上传完文件后，当跳转到其他页面再返回时，已上传的文件由于页面重新刷新是不存在的，如果要让页面重新显示已上传的文件有哪些方法？我想的方法是将文件file转换成Base64保存在sessionStorage中，当再次返回页面时，从mounted()方法中取出保存的Base64，然后将Base64转换成文件，将文件关联到<el-upload>就行了。
整个页面关闭后，就不保存文件了，所以存放在sessionStorage中了，如果要长久保存，则可以将文件存放在localStorage中。
具体步骤：
this.uploadFile是要保存的文件，这里只保存了一个文件
将文件转换为Base64
this.dataURLtoFile方法为将Base64转换为file
❼ el-upload有几种使用情况
1、用action上传
2、使用http-request="fn"自定义进行上传
共同之处
1、当默认:auto-upload="true" ，选取了文件就走了action或者http-request的接口方法。
当:auto-upload="false" ，都需要通过this.$refs.upload.submit()进行接口或者方法的调用
何时使用action，何时使用http-request。
看后台，如果后台只给了个拼接网址的接口时候，没提文件时候，用action。
如果后台给多个参数包含文件地址等，或者需要三方文件服务器oss等时候。用http-reques
//当 :auto-upload="false"的时候，要注意以下问题
1、选完文件，http-request="fn" 的fn（file）是不存在file的，因为没走接口，所以没有回调
2、使用before-upload可以限制文件大小和格式， :auto-upload="false"时候，这个钩子是不会被触发的，可以使用on-change进行处理。同样都有file入参
=====另外需要注意的问题====
使用了on-change方法 直接赋值this.fileList = fileList，
删除需要用的on-remove
:on-preview="handlePreview" 是点击每条数据时候触发
on-success文件上传成功时的钩子，如果:auto-upload="false"，是在submit()后触发
❽ elementui el-upload一次接口请求上传多个文件
el-upload组件多个文件上传都是多次请求上传接口，没有在文档中找到能够通过一次请求把所有文件上传的设置。最后只能通过用组件的部分功能，抛弃组件上传功能，通过axios自己将所有文件一次上传。
❾ el-upload上传多条一次性上传
<el-upload
class="specialinput"
ref="upload"
multiple
:limit="4"
:on-preview="handlePreview"
:on-change="handleChange"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:file-list="imgList"
list-type="picture-card"
:http-request="uploadFile"
:auto-upload="false">
<i class="el-icon-plus"></i>
</el-upload>
// 上传文件
uploadFile(file) {
this.fileData.append('files', file.file); // append增加数据
},
// 上传到服务器
submitUpload() {
if (this.imgList.length === 0) {
this.$message({
message: '请先选择文件',
type: 'warning'
})
} else {
const isLt100M = this.imgList.every(file => file.size / 1024 / 1024 < 100);
if (!isLt100M) {
this.$message.error('请检查，上传文件大小不能超过100MB!');
} else {
this.fileData = new FormData(); // new formData对象
this.$refs.upload.submit(); // 提交调用uploadFile函数
this.$axiosPost(
this.paidanurl + this.paidanport + '/api/Dispatch/UploadImage?flowid='+ this.operaInfo.flowid + '&recordid=' + this.recordid,this.fileData,function(data) {
if (data.Code == 1) {
this.imgList = [];
this.$message.success(data.Message);
} else {
this.$message.error(data.Message);
}
},
function(error) {
}
);
}
}
},
//移除
handleRemove(file, imgList) {
this.imgList = imgList;
},
// 选取文件超过数量提示
handleExceed(files, imgList) {
this.$message.warning(`当前限制选择 4 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + imgList.length} 个文件`);
},
//监控上传文件列表
handleChange(file, imgList) {
let existFile = imgList.slice(0, imgList.length - 1).find(f => f.name === file.name);
if (existFile) {
this.$message.error('当前文件已经存在!');
imgList.pop();
}
this.imgList = imgList;
}
}
❿ el-upload 上传列表li的样式
el-upload的图标和提示文字，都可以换成你需求图里的，很简单的，参考官方示例。
可以设置el-upload的:show-file-list="false"不显示下方默认上传的文件列表；然后，在el-upload的上面根据:file-list="fileList"中上传获取的fileList，自己做一个需求图那样的列表布局样式，这不难吧？最后，自己做的列表里删除和编辑的逻辑，就是数据的操作了。