alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[new feature] Uploader: support preview non-image file (#3604)

Browse Source
This commit is contained in:
neverland
2019-06-22 15:39:49 +08:00
committed by GitHub
parent a27df2c25f
commit dea0d28361
5 changed files with 91 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/uploader/test/__snapshots__/index.spec.js.snap
+21 -3
View File
@@ -22,7 +22,7 @@ exports[`max-count prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="test" class="van-image__img" style="object-fit: cover;">
<div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete">
@@ -32,11 +32,29 @@ exports[`max-count prop 1`] = `
</div>
`;
exports[`preview not image file 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image">
<div class="van-image__error"><i class="van-icon van-icon-description van-uploader__file-icon" style="">
<!----></i>
<div class="van-uploader__file-name van-ellipsis">test.md</div>
</div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
</div>
</div>
`;
exports[`preview-size prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__preview" style="">
<div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px;"><img src="test" class="van-image__img" style="object-fit: cover;">
<div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete">
@@ -52,7 +70,7 @@ exports[`render preview image 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="test" class="van-image__img" style="object-fit: cover;">
<div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete">
packages/uploader/test/index.spec.js
+29 -7
View File
@@ -5,22 +5,23 @@ window.File = function () {
this.size = 10000;
};
const mockFileDataUrl = 'data:image/test';
const mockFile = new File([], '/Users');
const file = { target: { files: [mockFile] } };
const multiFile = { target: { files: [mockFile, mockFile] } };
window.FileReader = function () {
this.readAsText = function () {
this.onload &&
this.onload({
target: {
result: 'test'
result: mockFileDataUrl
}
});
};
this.readAsDataURL = this.readAsText;
};
const mockFile = new File([], '/Users');
const file = { target: { files: [mockFile] } };
const multiFile = { target: { files: [mockFile, mockFile] } };
test('disabled', () => {
const afterRead = jest.fn();
const wrapper = mount(Uploader, {
@@ -39,7 +40,7 @@ it('read text', done => {
propsData: {
resultType: 'text',
afterRead: readFile => {
expect(readFile.content).toEqual('test');
expect(readFile.content).toEqual(mockFileDataUrl);
done();
}
}
@@ -276,5 +277,26 @@ it('click to preview image', async () => {
wrapper.find('.van-image').trigger('click');
expect(document.querySelector('.van-image-preview')).toBeTruthy();
const imagePreviewNode = document.querySelector('.van-image-preview');
expect(imagePreviewNode).toBeTruthy();
imagePreviewNode.remove();
});
it('preview not image file', async () => {
const wrapper = mount(Uploader, {
propsData: {
fileList: [{
content: 'data:application',
file: {
name: 'test.md'
}
}]
}
});
wrapper.find('img').trigger('error');
wrapper.find('.van-image').trigger('click');
expect(document.querySelector('.van-image-preview')).toBeFalsy();
expect(wrapper).toMatchSnapshot();
});